Lines and vertical-align in CSS

inline element formatting order: Font-size-->em Box----content area--inline box--position the row box height based on baseline

Related concepts:
Leading (line spacing): refers to fill in two lines of text between the lead bar, equal to the difference between Line-height and font-size, half of which leading added to the text, the other half of the leading added to the text, only for non-replacement elements.

em box:The EM box indicates the distance between baselines when there is no line spacing, does not specify a boundary between characters, and the actual glyph may be higher or shorter than its EM box.

font-size : Determines the height of the EM box for a given font, but does not guarantee that the actual displayed character is this size. The specific correspondence between the Font-size property and the actual font size is determined by the designer of the font.

Baseline:the line upon which most letters "sit" and below which descenders extend, not the lower end of the Chinese character, but the lower edge of the English letter "X".

Content Area ( Content Area ): A box that consists of a non-replacement element, an EM-box string, is indirectly determined by the font-size, and the replacement element: that is, the intrinsic height of the element plus the possible margins and boxes.

Inline Box ( Inline Box ): Virtual Rectangle box, cannot display, size is content area plus leading. For a non-replacement element, equal to the Line-height value, or to the replacement element, equal to the height of the content area. Several elements within the same row can have different row heights and inline box heights.

Line Box ( Line Box ): A minimum box containing the highest and lowest points of all the inline boxes in the row, the height of the row box is only related to the row height of the element in the line, but not directly to the line-height, and not to the height of the parent element (height) . Inline boxes are aligned vertically in rows based on their Vertical-align property values.

Anonymous text: refers to all strings that are not contained within the inline element.

Line-height: refers to the distance between the baseline of a text line, determines how much each element box increases or decreases, and defaults to 1.2 times times the font size of the element itself.

When the Line-height value inherits from the parent element, it inherits the value computed on the parent element, not the value computed on the child element (EM, and so on). If it is a scaling factor (a pure numeric value with no units), then the scaling factor is inherited, not the computed value, and the font-size of the scaling factor and child elements are ultimately computed.

Figure 1:

The lines in Figure 2:css

Figure 3: Determining the height of the row frame

Replace element
Replacing the margins and borders of an element affects the inline box of the element, which in turn affects the height of the row box.
Elements whose content is not controlled by the CSS visual formatting model, such as , <input>, <textarea>, <select>, <object>, and tags play the role of placeholders, The actual content is not in the document, called the replacement element. The browser displays these elements based on the label type and attributes of the element. For example, the content of an IMG element is usually replaced by the image specified by its SRC attribute. The replacement element usually has its intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap has intrinsic width and height specified in absolute units, and thus has a fixed width-to-height ratio. On the other hand, other documents may not have intrinsic dimensions, such as a blank HTML document.
The CSS rendering model does not consider rendering of replacement element content. The representation of these replacement elements is independent of the CSS. Object,video,textarea,input is also a replacement element, and audio and canvas are substituted elements in some specific cases. The object inserted using the Content property of CSS is an anonymous replacement element.

Non-replacement elements

All other elements other than the replacement element are non-replacement elements, and the actual content is in the document flow, and the visual formatting model of the CSS is responsible for rendering the non-replacement elements.
The margins and borders of non-replacement elements do not affect the height of the inline box in the row element.

vertical-align: vertical Alignment, applies only to inline elements, replacement elements, and table cells, and cannot be inherited.
The default value is baseline, which aligns the baseline of the element in the row with the baseline of the row, and the text is aligned by the baseline. If a vertical alignment element has no baseline, a comparison, a form INPUT element, or other replacement element, the bottom of the element is aligned with the baseline of its parent element .

There is space below, so line for the descenders you find onletters like F, J, p and Q. Fix it by setting a property value for the vertical-align of the picture or by changing D Islay:block, or modify the font-size/line-height of the parent element to make the height of the inline box smaller than the picture. In the extreme case of the parent element's font-size:0, the midline and baseline coincide.
Bottom: Aligns the bottom of the element's inline box with the bottom of the line box.
Middle: The center line of the inline element frame is aligned with a point at 0.25em above the baseline, and is equal to half of the lower case x height (that is, 0.5EX) from the baseline. The midpoint of the X character is not the absolute centerline of the content area, because the X character sinks.
Percent: the line-height calculation relative to the element . The line-height of an inline replaceable element is to help calculate vertical-align.
Value of length: Raises or decreases the specified distance from the baseline of an element relative to the parent element. The text perpendicular to it does not overwrite the text of the other lines, only the row height of the current row is affected so that it is sufficient to contain the top of the highest inline box and the bottom of the lowest inline box.

Inline block: Inline-block, the inline block element is placed in the row as a replacement element, and the bottom of the block is placed by default on the baseline of the line of text. Ie6/ie7 to use {display:inline; zoom:1; ...} will take effect. Typically used for horizontal menu lists or unequal list elements to arrange neatly. However, the space between the LI tags is used as an inline element to display 4px of space on the page, which can be font-size:0 by the parent element, font-size:12px by the child element, and eliminate whitespace. For Ie6/ie7/safari, adjustments need to be made using word-spacing and letter-spacing.

Inline blocks are baseline aligned by default, but there are special rules for determining baseline. Thebaseline of an ' inline-block ' was the baseline of its last line box in Thenormal flow, unless it had either no in-flow l INE boxes or if its ' overflow ' property had a computed value other than ' visible ', which case the Baselineis the bottom Margin edge. So the layout will appear as shown, can be changed by vertical-align:top;

Lines and vertical-align in CSS