Margin and Padding

All the margin and padding properties can have the following values:

  • auto : the browser calculates the margin
  • length : specifies a margin in px, pt, cm, etc.
  • % : specifies a margin in % of the width of the containing element
  • inherit : specifies that the margin should be inherited from the parent element
Margin and Padding Honar Systems

Padding

In CSS, padding is the space kept between the content and the border. It separates the content of a block from its edge. The amount of padding of an element is specified by using the term “padding” in CSS code.

Padding Honar Systems
p{
    border: 1px #333 solid;
    padding: 15px; 
}

Padding

Important Type of padding :

p{
    border: 1px #333 solid;
    padding-top: 15px; 
    padding-right: 10px; 
    padding-bottom: 5px; 
    padding-left: 0; 
}

Padding

Or you can write all the property in one line of code:

p{
    border: 1px #333 solid;
    padding: 15px 10px 5px 0; 
}

Margin

In CSS, the margin is the space outside the border. It separates a block from other blocks.  The margin is also transparent, The amount of margin in CSS is specified using the term “margin”.

Margin Honar Systems
p{
    border: 1px #333 solid;
    margin: 15px; 
}

Margin

Important Type of margin :

p{
    border: 1px #333 solid;
    margin-top: 15px; 
    margin-right: 10px; 
    margin-bottom: 5px; 
    margin-left: 0; 
}

Or you can write all the property in one line of code:

p{
    border: 1px #333 solid;
    margin: 15px 10px 5px 0; 
}

Differences Between Margin and Padding

Difference between margin and padding is an important aspect in CSS as margin and padding are two important concepts used in CSS to provide spacing between different items. Basically, a margin is the space around an element and padding refers to the space between an element and the content inside it, Margin separates blocks from adjacent blocks while the padding separates the border from the content.

Margin and Padding Honar Systems