Inline Formatting

Just as anonymous block boxes are sometimes created in a block formatting context, anonymous inline boxes can be created when necessary. Here’s an example of the automatic creation of anonymous inline boxes:

<p>In 1912, <em>Titanic</em> sank on her maiden voyage.</p>

Since there’s a child element—the em element, which generates an inline box of its own—two anonymous inline boxes will be generated to contain the text nodes that are immediate children of the p element, as shown in Figure 1.

An anonymous inline box inherits its properties from its parent block box—the p element box in this example. Any non-inherited properties are set to their initial values.

In an inline formatting context, boxes are laid out horizontally, starting at the top of the containing block. Horizontal margins, padding, and borders can exist between the boxes, but vertical margins are ignored for inline boxes. Dimensions (width and height) can’t be specified for inline boxes.¹

The inline boxes that form a single line are enclosed by a rectangle that’s called a line box. Boxes within a line box are aligned vertically according to their vertical-align properties. A line box is always tall enough to accommodate all its inline boxes.

When several inline boxes can’t fit into a single line box, they’re distributed over two or more stacked line boxes.

When a single inline box can’t fit into a line box, it’s split into two or more boxes that are distributed over as many line boxes as necessary. Margins, borders, and padding aren’t applied where such splits occur.² Consider the following example markup and CSS:

<p>Text in a <em>narrow column</em> can break.</p>

em {
  margin: 0 1em;
  padding: 0 1em;
  border: 1px solid #000;
}

If margins, padding, and borders are set on that em element, the result may not be what the author intended if the element’s box is split into two line boxes as a result of line wrapping—Figure 2 shows the potential result.

As you can see, the margin and padding are applied to the left of the word “narrow” and to the right of the word “column.” The borders are applied on three sides of each of the two inline boxes.

If the total width of the inline boxes is less than the width of the line box, the direction and text-align properties control how the boxes are distributed inside the line box.

The left and right edges of a line box normally touch the edges of its containing block. When there are floats in the way, however, the line boxes adjacent to the floats are shortened—see Floating and Clearing for more information.

Although line boxes are stacked with no space between them, we can affect the height of a line box with the line-height property. If the computed value of the line-height property is greater than the vertical distance occupied by the inline boxes in a line box, the line box is vertically centered within the specified line height. Half the difference is added at the top of the line box and half at the bottom. This behavior corresponds to the typographical concept of half-leading, where strips of lead (hence the name) or brass were inserted between the lines of type to increase the line spacing.