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.

The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the ‘line-height’, but leads to glyphs painting outside their content area.).

CSS3 may include a property to select which measure of the font is used for the content height.

Style all three boxes with:

	line-height: 0;

Style all three boxes with:

	line-height: 50%;

Try These

Watch This


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).