Normal Positioning

This page is an example of how elements in the normal flow are positioned. Block elements expand to fill the content area of their containing elements unless their dimensions are otherwise defined. Block elements also stack vertically and are separated visually by their margins. Vertical margins between two block boxes are collapsed.

This paragraph has defined margins of 20 pixels on all sides. The paragraph above this paragraph has defined margins of 5 pixels on all sides. The total margin space between the two paragraphs will be 20 pixels because of margin collapsing.

This block has a defined width of 200 pixels. This emphasized text forms an inline box and does not affect the width of the containing block.

This paragraph sits below the paragraph above it even though there is clearly enough room to place them side by side.

Another paragraph element with no defined width.

This block has a defined height of 50 pixels. When the text grows too large for the box, the text overflows outside of the box. Except in Internet Explorer where the box is grown to fit the content.

And the next box goes where? Right below the previous box. The text from the previous box overlaps with this box.