In the previous article “CSS Formatting Context BFC” we explained the concepts associated with the visual formatting model (box Model) and typesetting context, as well as the concepts and application scenarios of the next block-level formatting context (BFC). In the previous article, we learned that in the normal flow of a page, different types of boxes participate in different FCS. Block-level boxes participate in BFC and line-level boxes participate in IFC. In this case, we will talk about IFC.

1, Inline-level box

The counterpart of the block-level box is the row-level box, which has the same structure as the block-level box, but has its own features based on the base box model. For example, if the width of a line-level box is determined by the width of its child content-box (margin+border+padding+content width), defining width directly is ineffective.

An element will correspond to 0 to N boxes (display None corresponds to 0 boxes). According to the value of display attribute, The element will correspond to different controlling boxes (inline-level box and block-level box are both subclasses of controlling box). CSS2 in the display for the inline | inline – block | inline – table | table – cell | table column – group is the inline elements, the corresponding box – level.

Line-level boxes are arranged horizontally from left to right in the containing block, which is not the same as block-level boxes, but there is actually an implicit concept of line-boxes, which are also arranged vertically in typography.

Conclusion:

The structure of an inline-level box is basically the same as a block-level box.

The height of the Content box can only be set by font size, and the width of the content box is adaptive to its content and cannot be controlled by setting width.

When the width of the inline-level box contains the width of the block and reaches the newline condition, the inline-level box is split into multiple inline-level boxes and distributed among multiple lines. Then, when the attribute direction is LTR, Margin /border/padding-left will apply to the first inline-level box, margin/border/ padding-right will apply to the last inline-level box, if the direction is RTL, The effect is the opposite.

2, Line box

The line box is an invisible border, but the height of each line is actually the height of the line box, not the height of the inline-level box.

2.1. Features of Line Box

Line-level boxes of the same line belong to the same line box

The height of the line box is calculated by combining the line-height and vertical-align attributes.

Eg:

1. According to the rule, the height of the line box on the sp.parent line is affected by the height of the inline-level box corresponding to the sp.parent, sp.child, and SP.inline-block elements. The height of sp.parent is the actual height of its line, the height of sp.child is the actual height of its line, and the height of sp.inline-block is the height of its margin box. Span. Parent and span. Child’s content box height equals the actual value of line-height.

2. Align each height vertically according to the vertical-align attribute, so that the upper or lower boundaries of each height are not aligned.

3. Sp.inline-block The distance from the red border top to the sp.child blue border bottom is subtracted 1px to obtain the height of the line box. (The lower bound of line box is the lower bound of span. Child’s content box.)

Conclusion:

The layout unit of an inline-level box is not the body but the line box, and the emphasis is on the calculation of line-height.

All normal-flow inline-level boxes on the changed line participate in the calculation of line-heigh height.

Replace elements, inline-block elements, and inline-table elements will participate in the calculation of line box with their corresponding opaque margin box. The height of the other inline-level boxes is calculated with the actual value of the line height.

Each inline-level box is aligned in the vertical direction of its parent container according to the vertical-align attribute value.

The difference between the top edge of the uppermost box and the bottom edge of the bottom box is the height of the line box.

3. Formation of IFC

In the visual model, boxes formed by elements participate in the formatting context (initialize size, layout, typesetting), different types of boxes participate in different FC, and only one FC, and row-level boxes participate in IFC.

4. Features of IFC

1, Inline-level boxes are placed horizontally, one after the other, starting at the top of the containing block.

2. When placing inline-level boxes, the space occupied by horizontal margins, borders, and margins is taken into account. Vertically, these boxes may be aligned in different ways: they may be aligned at the bottom or top, or they may be aligned with the text baseline within them. A rectangle that contains all inline level boxes on a line, called a line-box, or multiple line boxes if there is not enough of one. Horizontal margin, padding, and border are valid, but vertical ones are invalid.

3. The width of an inline-level box is determined by the containing block and the existing float. The inline-level box must be high enough to contain all the inline-level boxes it contains. However, it may also be taller than the tallest box it contains.

4, the left side of the inline-level box is next to the left side of its containing block, and the right side of the line box is next to the right side of its containing block. However, floating boxes can be inserted between the contain block edge and the line box edge. So, although inline-level boxes in the same IFC usually have the same width (that is, the width of the block they contain), their width can also change as floating reduces the horizontal available space. Within the same IFC, the height of the inline-level box is usually variable (for example, one line contains a higher image and another line contains only text).

5. When the total width of the inline-level boxes on a line is less than the width of the inline-level box containing them, their horizontal distribution within the inline-level box is determined by the ‘text-align’ attribute.

6. When the width of an inline-level box exceeds the width of the line box, the line box is divided into several inline-level boxes. The inline-level boxes are distributed among several line boxes. If the line-level box is indivisible (for example: Single character, or language-specified text break rules do not allow breaking in this inline-level box, or the inline-level box is affected by the white-space property being NowRAP or pre), Then the inline-level box overflows the line box.

7. When the line box is segmented, the margins, borders and inner margins have no visual effect where the segmentation occurs.

** Line height calculation — ‘line-height’ and ‘vertical-align’ attributes **

Calculate the height of each inline-level box inline box. For permutation elements, inline block elements, inline table elements, this is the height of the bounding box, and for inline boxes, this is its’ line-height ‘.

Inline elements are vertically aligned according to their ‘vertical-align’ attribute.

The height of the line box is the distance from the top edge of the top inline-level box to the bottom edge of the bottom line-level box.

8. Multiple line boxes under the same IFC will have different heights

Note: An inline-level box cannot contain a Bloc -level box. If a block-level element is placed in a line-level element, such as a div inserted into a SPAN, a unique IFC will be formed to separate it from the div, which appears as BFC and is aligned vertically with the DIV.

Reference net article, error left unsaid place, please forgive.