CSS And Internet Explorer

If you haven’t read the previous part of this tutorial then I suggest first go through it. Internet Explorer 7 gets most of the margin collapsing behavior correct. However, it does have some issues.

BODY elements never take part in margin collapsing, since they are considered magical, which means sometimes a strange gap does not show up in Internet Explorer when it does in other browsers, when the collapse happens with the top of the BODY.

This is usually easy to solve; just prevent the margin collapse for the other browsers, and it works in Internet Explorer too. (Note that the HTML element’s margins never collapse in any browser, this is correct behavior.)

In rare cases, margin collapsing where an inner element has a bottom border and an outer container has a bottom border, can cause the background of an intermediate element to spill into the container in Internet Explorer.

The more problematic bug is caused by Internet Explorer’s strange hasLayout behavior. This is a fundamental bug in Internet Explorer and affects several other things as well, but this article will only deal with margin collapsing. Setting certain styles on an element makes it “have layout” (a concept unique to Internet Explorer, and not compliant with any standards).

The most common style that causes a problem is width. When an element hasLayout it suddenly assumes a minimum height of 1em, and if set to something less in Internet Explorer 6, such as 0.5em, it still uses 1em.

An element has layout when one of the following conditions is true:

* It has a width and/or a height specified
* It is an inline-block (display: inline-block)
* It has absolute positioning (position: absolute)
* It is a float (float: left, float: right)
* It is a table element
* It is transformed (style=”zoom: 1″)

Height usually does not cause a problem, since setting height will prevent collapsing in other browsers anyway. However, triggering hasLayout on a nested element where the parent has prevented margin collapsing using borders or padding, can cause margins to disappear, or to collapse through the parent irrespective of the padding or borders. Generally, hasLayout is a mess, and it is best to avoid it in places where margins are critical.

 
CSS And Positioning

When an element has either position:absolute or position:fixed, it is taken out of the flow, and its margins no longer take part in any collapses at all.

1
2
3

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

The gap between A and B is max(16,16), which is 16 pixels.

 
CSS And Floats

Float also takes elements out of the flow. The margins of its siblings touch as if it was not there, and they collapse while completely ignoring it, as with positioned elements.

When the float is being positioned, it is initially placed as if it had no top margin at all (so its top margin does not take part in any collapsing), and as if it had no subsequent siblings (so any collapsing between its preceding and subsequent siblings is temporarily ignored).

Any margins of preceding elements that are due to take part in a margin collapse have their margins collapsed assuming any siblings following the float do not exist.

The float is then placed below that collapsed margin. It is then moved downwards by its own top margin. The float is then ignored, and the normal margin collapse is recalculated assuming the float does not exist, but the subsequent siblings do exist, as described in the paragraph above.

The bottom margin of a float does not take part in any collapsing at all. However, elements that are pushed downwards when they are told to clear the margin of a float (using the clear style), may no longer touch a margin that they normally would, so they will not collapse with it.

If the float contains any non-inline elements that have their own margins, these never collapse with the float’s margins.

 
Other Situations

Elements that have non-visible overflow may take part in margin collapsing with the elements around them, but will not take part in any margin collapsing with any elements inside them.