Understanding Inline and Block Level Elements

Block level elements are normally displayed as blocks with line breaks before and after. Examples of block level elements include paragraphs, headings, divs, and block quotes.

Inline elements are not displayed as blocks. The content is displayed in lines and there are no line breaks before and after. Examples of inline elements include emphasized text, strong text, and links. Examples of both block and inline elements are shown in Figure 5.1.

Figure 5.1. Examples of block level and inline elements.

All block level and inline elements are boxes that use the box model. Both types of elements can be styled with box model properties such as margin, background-color, background-image, padding, and border as shown in Figure 5.2.

Figure 5.2. Three-dimensional diagram of the CSS box model.

Some box model properties, such as height and width, do not apply to inline elements. Also, margin and padding applied to an inline element will affect content on either side, but not content above or below.