block formatting contexts

A block formatting context is a box that satisfies at least one of the following:

The aqua and yellow boxes establishes new block formatting contexts in which the vertical margins of the headings are contained.

IE 6 makes the aqua and yellow boxes grow to accomodate their content. If the pink box behaves the same it is because of the height declaration that triggers haslayout which creates (more or less) a block formatting context.

Style the pink box with:

	margin-top: -1.4em;

Try These

Watch This




Check This

<div id="aqua">     <h1>aqua</h1> </div> <div id="yellow">     <h1>yellow</h1> </div> <div id="pink">     <h1>pink</h1> </div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).