Padding and margin

Two complementary properties that seems similar and have the same syntax but a different role.

They apply to most tags. They do not work with <span> but it a display:block property is assigned.

Demonstration

HTML code (with DIV or SPAN):

<div>
    <div>
        <img src="..." />
    </div>
</div>

All external layers have a padding of 8px and internal layers a margin of 8px.
Only the second layer have a width and height imposed. (See CSS at the end of the article).

DIV
DIV with width and height 		SPAN

When specified, the height and width are given those of the image.
We see that padding and margin increases the size of the external layer, unless the dimensions are given in which case, the content is truncated.

Syntax

padding: top right bottom left;
margin: top right bottom left;

Example:

padding: 8px 8px 8px 8px;

Shortcuts

When we write:

padding: 16px 8px;

The top and bottom will have an internal margin of 16 pixels.
The left and right margins will have a inner margin of 8 pixels.
It is the same with the margin property, for the outer spacing.

When we write:

padding: 8px;

The same spacing values of 8 pixels apply on each side.

If we provide three values, they will cover the top, right, down sides.

Specific margins

We can designate exactly which side we apply a padding or margin.

Padding:

Margin:

The statement:

padding: 8px;

is equivalent to :

padding-top: 8px; 
padding-right: 8px; 
padding-bottom: 8px; 
padding-left: 8px;

Values

The values of the four parameters can be expressed as absolute values in pixels or other bases, or percentages.
The percentages apply to the dimensions of the container, the tag which was given margins.
The percentages of horizontal spacing may apply depending on height, not width, see the specification on this.

The margin values may be negative, this has the effect of moving the item out of its container.

The padding values are always positive.

Reduction rules

In some cases, when elements overlap, the margins can be added and in others, we retain only the larger of the two.

The horizontal spacings are always added.

Vertical margins are added when:

Vertical margins are merged when:

Other rules apply to cases more accurate and are described in the specification of CSS 2.1 and CSS 3 box model.

Code source of the demo

The first layer has divouter identifier, the second divouter2, the third spanouter. They contain a inner layer with the inner suffix.

<style type="text/css">
#divouter, #divouter2, #spanouter { 
    padding:8px; border:1px dotted black;background:#093;
}
#divouter2 { 
   width:150px; height:100px; 
} 
#divinner, #divinner2, #spaninner { 
  margin:8px; background:white;
}
#spanouter {display:block;}
</style>

Full HTML code:

<div id="divouter">
  <div id="divinner">
    <img src="/images/thumb-maurice.jpg" width="150" height="100" />
  </div>
</div>
DIV

<div id="divouter2">
  <div id="divinner2">
    <img src="/images/thumb-maurice.jpg" width="150" height="100"  />
  </div>
</div>	
DIV avec width et height

<span id="spanouter">
  <span id="spaninner">
    <img src="/images/thumb-maurice.jpg" width="150" height="100"  />
   </span>
</span>
SPAN

References

© 2010-2022 Xul.fr