Web Design in a Nutshell, 3rd Edition

Margin Behavior

It is helpful to be aware of these general margin behaviors.

• Margins are always transparent, allowing the background color or image of the parent element to show through.

• Elements may have negative margins, which may cause elements to break out of containing blocks of their parent elements or overlap other elements on the page.

• The vertical (top and bottom) margins of adjacent block elements in the normal document flow will collapse. That means that the space held between adjacent block elements will be the larger of the two margin values, rather than the sum of their margin values. The collapsing margins in the following examples are demonstrated in Figure 19-5.

      h2#top {margin: 10px 20px10px 20px;}
  
      h2#bottom {margin: 20px 20px 20px 20px; }
  
          <h2 id="top" >Lorem ipsum dolor sit amet,</h2>
          <h2 id="bottom" >consectetuer adipiscing elit.</h2>

  

  Figure 19-5. Collapsing margins

• The vertical margins do not collapse for floated elements, absolutely positioned elements, and inline block elements.

• In CSS 2.1, horizontal (left and right) margins never collapse.

• Top and bottom margins applied to non-replaced inline elements (text elements such as em or strong) have no effect on the height of the line. In other words, top and bottom margins are not calculated as part of the element’s inline box or the height of the line box for that line.

• Left and right margins applied to non-replaced inline ...