Web Design in a Nutshell, 3rd Edition

Block and Inline Elements

If you are familiar with (X)HTML, you already know something about block-level and inline elements . CSS uses the terms “block” and “inline” as well, but it is important to understand that it is not the same as what makes elements either block or inline in (X)HTML.

In (X)HTML, the distinction between block-level and inline elements is based on containment rules, or in other words, what elements can be nested within what other elements. In general, block-level elements may contain both block and inline elements , while inline elements may contain only data and other inline elements. Paragraphs (p), headings (such as h1), lists (ol, ul, dl), and divs are the most common block-level elements . However even some of those block-level elements must obey special rules in (X)HTML; e.g., paragraphs, headings, and address (<address>) may only contain inline elements and content. Emphasized text (em) and anchors (a) are examples of common inline elements. It is invalid markup to nest a paragraph within an anchor element, for example.

In CSS, however, the notion of block-level and inline is purely presentational. block and inline are two possible display roles that are used to tell user agents how to present the element in the layout. Display roles are assigned using the display property. The following descriptions summarize the presentational differences between block-level and inline elements in CSS.

A CSS block-level element (display: block) always generates breaks ...