tests: block formatting context, display:table and margin collapsing.

back to introduction.

Relevant code

div#testgrid p, div#testgrid div, div#testgrid table {margin:1em;}
h5 {margin: 1.5em 3% 1em;}
div.inflow {background:#d8ebff;}
table {background: #daf2e8;}
div.tablediv {display:table; background:#ffd4cc;}

Notes

• Refer to collapsing margins in the CSS 2.1 docs.
• Per the spec (9.4.1), display:table does not generate a new block formattting context by itself. However, an element with display:table generates a number of anonymous boxes, one of them being a box with display:table-cell. It is that last anonymous box that establishes the new block formatting context.
• IE 5 Mac: does not support display:table. As an alternative, display:inline-table or display:inline-block can eventually be used.
• IE Win: does not support display:table. This can be simulated by having the elements gain ‘haslayout’ — see On having layout. Note, the last div loses the bottom margin, see these test files for more problematic variations.
• This works fine in iCab 3 (beta 382), Firefox 1.0x and newer, Safari 1.2 and newer, Opera 7.54 and 8.0x, Mozilla 1.0 and newer. Note: the difference in vertical margin handling between Gecko browsers (bug 87277) and Safari/Opera. Older Webkit based browsers (v85, 1.1) have some problems in computing the width of the elements with display:table.

Last modified: September 10 2009 03:10:54 GMT.

• A [ La Chatte Noire ] development area
• [ contact ]
• [ sectionindex ]
• [ Empty Spaces ]