CSS: Block Box, Line Box and Inline Box

Block-Level Elements

The short definition is that block-level elements are elements that create blocks or large groupings of text.

block-level elements have some specific distinctions from inline elements:

* block-level elements generally can contain text, data, inline elements, or other block-level elements.
* block-level elements generally begin new lines of text.
* block-level elements inherit directionality information differently from inline elements.

Examples:

* <p></p>
* <blockquote></blockquote>
* <table></table>


Inline Elements

The short definition is that inline elements are elements that are found in the text of the HTML document. They are also sometimes called text level elements.

Inline elements have some specific distinctions from block-level elements:

* Inline elements generally only contain text, data or other inline elements. They are usually "smaller" than block-level elements.
* Inline elements do not generally begin new lines of text.
* Inline elements inherit directionality information differently from block-level elements.

Also Known As: text level elements
Examples:

* <span></span>
* <strong></strong>
* <abbr></abbr>


There are block-level boxes, line boxes and inline-level boxes. A block-level box is like a paragraph. A line box is like a line of text. And inline-level boxes are like words inside a line.

The precise rules are below and in other modules, but in summary, a block-level box contains either other block-level boxes (e.g., a section containing paragraphs, or a table containing rows), or it contains line boxes (e.g., a paragraph containing lines of text). A line box contains inline-level boxes (e.g., a line with words in different styles). An inline-level box may contain either text interspersed with more inline-level boxes, or it may contain a block-level box (e.g., a small table that is rendered inline).

For example, a fragment of HTML such as

<ul>
<li>The first item in the list.
<li>The second item.
</ul>

may result in one block-level box for the ul element, containing two block-level boxes for the two li elements, each of which has one line box (i.e., one line of text). Both line boxes contain two inline-level boxes: one that contains the list bullet and one that contains the text.

Note how the li is transformed into multiple boxes, including one that contains generated content, viz., the list bullet, which is not present in the source document.

If the document is rendered in a narrow window, it may be that the li elements get transformed into even more boxes, because the text requires multiple lines. And if the document is rendered on paper, it may be that a page break falls in the middle of the ul element, so that it is not transformed into a single block-level box, but into two smaller ones, each on a different page.