HEYGB.COM

Fundamentals of Margin in CSS

Many Web developers run into margin collapsing without realizing what it is, or why it is happening. It takes place on virtually every Web page, and in most cases, it creates the desired effect without causing any undesired side effects. However, when it does cause a problem, it usually appears as strange gaps at the top of elements even when they have their top margins set to 0. The typical response is to use an unrelated workaround of some kind, such as positioning everything. Understanding the cause allows more efficient workarounds to be used, especially those that actually deal with the root cause.

Historically, margin collapsing only exists because older browsers like Netscape 3 used to do it before they had CSS, and when CSS was created, it had to describe that behaviour so it could be implemented in CSS.

 
CSS - Box Model

The first thing you need to understand is the CSS box model. In its simplest form, a box is a block element, like a DIV, for example. In the middle of the box are the contents. If the relevant styles are set, even if there are no contents, the content size comes from the height and width styles (you will need to ensure that your DOCTYPE triggers standards mode rendering for some browsers, particularly Internet Explorer, for them to get this part correct). Then outside the contents, but still inside the box, is the padding. Then outside the padding, but still inside the box, is the border. Outside the border is the margin. “Box” is only a word, you do not really need to think about it yet. It is more important to understand where the various margin, border, padding, and content exist in relation to each other.

Almost no elements have padding by default. Some of the rare cases where an element has padding by default would be fieldsets, or in some browsers the padding of the body, and the padding of a DL list. For the sake of this tutorial, it is easiest to assume that no block elements have padding.

Most block elements have a default top and bottom margin, such as paragraphs and headings for example, which may have a top and bottom margin of 1em, which computes to 16 pixels if that is the current font size. This is what creates the gap between two paragraphs. It is also what causes margin collapsing to be so important. This tutorial will assume that paragraphs have a 16 pixel top and bottom margin, but you should be aware that different browsers will have very different default margins, and can also change depending on user settings such as font size.

 
Lets take a example:

1
2
3
4

  <div>A</div>
  <p>B</p>
  <p>C</p>
  <div>D</div>

Paragraphs may have 16 pixels top and bottom margins, while DIVs have 0. As a result, the gap between the DIV and paragraph is 16 pixels in each case. The gap between the two paragraphs is also 16 pixels, even though there are two paragraphs, and they may be expected to have 32 pixels between them. This is a margin collapse.

 
First Type of Margin Collapse

Margin collapsing only happens with top and bottom margins, not left and right, and not at all on inline elements. Margin collapsing happens wherever two (or more) top or bottom margins are touching. The basic idea is that when they touch, instead of getting the sum of the two margins, the bigger one is used, and the other is ignored. So in the case of the two paragraphs, the 16 pixel bottom margin of the first one touches the 16 pixel top margin of the second one. Max(16,16) is 16, so the gap between them is 16 pixels.

 
Three Elements

1
2
3

  <p>A</p>
  <p style="margin-top:100px;margin-bottom:50px;"></p>
  <p>B</p>

The middle paragraph has no contents, so it also has no height (since the CSS does not specify a height for it). However, it is still there. The resulting margins are like this:

1
2
3
4
5
6
7
8

  16 pixels
  A
  16 pixels
  100 pixels
  50 pixels
  16 pixels
  B
  16 pixels

The middle paragraph is 0px high, so its margins are touching. So there are 4 margins touching each other. The gap between A and B is max(16,100,50,16), which is 100 pixels.