block-level elements

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). They begin on new lines. Several values of the 'display' property make an element block-level.

Contrary to popular belief, the default width of a DIV is not '100%', but 'auto'. The margin box of a DIV is as wide as the content box of its containing block. The margin here does not trigger a scrollbar (at the bottom of the viewport), it only shrinks the border box.

Percentages are calculated based on the containing block.

Style the aqua box with:

	margin-top: 50%;

Try These

Watch This

aqua
yellow
pink

Check This

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

Edit This

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