page-119(the line – height)

Why does line-height allow inline elements to be “vertically centered”?
Myth:
  1. To center a single line of text vertically, all you need is the line-height property, which has nothing to do with height. (no need to set line-height to the same size as height);
  2. Line height controls the vertical center of text, not only for single lines, but also for multiple lines. Line-height allows single – or multi-line elements to be approximately vertically centered. The vertical center position of text glyphs is generally lower than the vertical center position of true line boxes. Vertical centering of multiple lines of text or replacement elements works differently than single-line text and requires the help of the vertical-align attribute, a friend of line-height.
What is the value of the line-height attribute? 100% / 1.5/20 of px
(word-break *font-size) /2= word-break

If a value is used as the value of the line-height attribute, then all children inherit that value. However, if the percentage value or length value is used as the attribute value, then all child elements inherit the final computed value. (PS: The row height must not be rounded down, but rounded up)

The “Large Value Characteristic” of inline element Line-height

Regardless of how the inline element line-height is set, the final height of the parent element is determined by the one with the highest value. Inline elements are elements that support line-height and line-height does overwrite the.box element, but in the inline box model, there are “ghost empty nodes”. As long as there are inline boxes, there will always be line boxes, the invisible layer of boxes that surrounds each line of inline elements. Then, each “line-box” is preceded by an invisible “ghost blank node” with a width of 0 that has the element’s font and line-height attributes. The height of the line box is determined by the height of the “inline box”. If you set a higher value for the line box, the “ghost blank spot” will be supported by this value. If you set a higher value for the inline element, the line box will be supported by the line height of the inline element. So either setting a larger line height for an inline element or a line-boxed box will eventually show the maximum line height.

Page – 127 (vertical – align)

Attribute values:
  1. Line classes, such as baseline, top
  2. Text classes, such as text-top
  3. Superscript subscript classes, such as sub
  4. Numerical percentage classes, such as 20px, 2em, 20%
Vertical-align has the following advantages:
  1. Compatibility is very good;
  2. You can precisely control the vertical alignment of the introverted elements

Tips: Middle controls the vertical position, which is not really vertical center, so there is still a pixel level error, depending on the font size and size. In CSS, any percentage value requires a relative calculation. For example, margin and padding are calculated relative to width, and line-height is calculated relative to font size. The percentage value of the vertical-align attribute is calculated relative to the calculated value of line-height.