HTML & CSS: The Good Parts

Element Flow

You can lay out elements among their neighbors by specifying one of three types of flow behavior: inline, block, and inline-block, illustrated in Figure 6-5. The HTML specifications are the source for these definitions, and dictate the default flow behavior of all elements.

Figure 6-5. The three principal flow types are inline, block, and inline-block

The stylist can further modify these flow behaviors—or in some cases negate them—by applying the float or position property.

Inline Elements

Inline elements, for example strong, are laid out like normal text. The baselines of inline element content are common to those of neighboring text, and linebreaks are arbitrarily applied to their content by default. In current browsers, custom margins, borders, and padding can be applied to inline elements, but those values do not affect the layout of adjacent content.

Most importantly, layout characteristics other than margins, borders, padding, and positioning cannot be applied effectively to inline elements.

Text that isn’t enclosed by inline markup behaves like inline content, but can only be referenced in a stylesheet via their parent element.

Block Elements

Default block element flow follows four simple rules:

1. Block elements expand to fill the available horizontal space within their containing element.

2. They never overlap or are overlapped by other elements, except those that they contain. ...