With respect to the well-known block-level formatting context, the context is formatted more complex and difficult to understand. Unlike inline elements as block elements go straight, a block element line, that other block elements can be sequentially arranged downward in the vertical direction. Inline different elements, elements can be displayed in multiple lines in a row, then, in a row, multiple rows within the element is how the arrangement, the following will try to explain.

Construction of line

First let us understand what constitutes a line of things:

<p>
    xem
    <span>
    	行内框
    </span>
    <img style="width: 40px; height: 40px; margin: 10px;" src="" />
</p>

It has a top 匿名文本, a 行内框is non-replaced inline elements <span>, replacing elements in a row<img />

Anonymous text xem

Means that no element is wrapped directly exposed to the parent element in the text.

These texts should account for much of the place? In fact, every character will have a text em box (see Figure: 1-1), then em box with multiple em box on the formation of a content area (see Figure 1-1). Well, we tried to get on top of this anonymous text, of course, not the bin, continue below.

em box

em box is defined in the font, and the same values of the height and font-size.

Picture 1-1

Inline boxes

Within such a line span element row formed inner frame (anonymous text will be formed), the inner frame line content area is a step of forming the contents in accordance with the above anonymous area plus text line spacing is formed. There was a line spacing.

Line spacing and where they come from? Row pitch line height (line-height) obtained by subtracting the height of the content area.

We get the line spacing, and line spacing divided by two, respectively upper and lower regions on the content of the rows formed inner frame (see FIG: 1-2).

Figure 1-2

img elements

img element is a replacement element, the element will form a replacement content area, and the row can not be applied to the high replacement element, the element is replaced to the line spacing thing does not exist. Then replace the height of the element content area is calculated ye? Calculated and non-replaced elements calculated in different ways, not only their own width and height Harajuku replacement value further comprises padding, border, and the margin. We all know alternative non-perpendicular direction element margin, padding and border position is not accounted for, but the elements are alternatively occupy position (see FIG: 1-3).

Figure 1-3

Line box

There is a line box above several elements (not referring to the label), then how to calculate the height of the line box occupied? Line box calculation, the baseline and the highest point line box, line box and the lowest point distance can be.

By this description can be seen, line-height only represents the minimum height of a line, the line height is not a (see FIG: 1-4).