tests: block formatting context, display:inline-block and margin collapsing.

back to introduction

Note: this test file illustrates how display:inline-block can eventually be used as an alternative for display:table in MSIE for Mac.

div, in flow, no new block formatting context

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

div, in flow, no new block formatting context

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

div, in flow, new block formatting context with display:inline-block

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

div, in flow, new block formatting context with display:inline-block

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

div, in flow, new block formatting context with display:inline-table

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

Relevant code

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

Notes

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