CSS Line Height Introduction

1. The definition of line-height row height is the distance between two baselines
2. The vertical-align default is the baseline (the baseline is something of the font itself)
3. The lower edge of the letter x is the baseline
4. X-height: Represents the distance between the baseline and the dividing line
5. Vertical-align:middle, it should be noted that the distinction between middle and median (midline) is not equivalent, and strictly speaking, middle refers to the baseline (baseline) up to 1/2 ' X-height ' height, so we can approximate the middle brain to the intersection of the letter X.
Therefore, Vertical-align:middle is not absolutely the vertical center, the usual see middle effect is only an approximate effect, strict vertical center should be based on baseline to the center.
6. Unit ex: This is a relative unit in CSS, refers to the height of the lowercase letter x, in fact, ex is representative of X-height just
Value of ex: the vertical center effect of an inline element that is not affected by the font size, or ex is a unit relative to the font size.
7. Row height: Refers to the context of the line between the baseline of the vertical distance =①+②+ 2*③+④
8. Leading: Refers to the line line to the next line of the top line between the vertical distance = 2*③, even if not set Line-height, just set font-size, leading is also default is not 0, line spacing in the absence of line-height impact, Will change dynamically as the size of the font-size changes.
9. Font-size: The vertical distance between the top line and the bottom line =①+②+④= high-line spacing 10. The content area is the distance between the bottom line and the top line, which is the area of Font-size 11. Line-height when you use a block-level element, you define the minimum spacing of 12 between the baselines in the element. The pixel is relative to the unit length, which is implemented for 13 of the screen cover on the Monitor. EM is the relative unit length, relative to the font size of text within the current object, if the font size of the current inline text is not set, then the default font size of the browser is relative, so by default 1em = 16px, 12px = 0.75em 14. The so-called padding is to extend outward from the part outside the font-size, that is to say, the area outside the content area, therefore, the padding area will coincide with the half line, if font-size>= row height, then half spacing ==0, half spacing cannot be less than 0 15. By default, the Line-height is 1.14 times times the current font-size size and the resulting result is rounded, and if the result is odd, it is divided up and down half (| Upper half margin-lower half margin | = = 1; if it is even, it is divided into the upper and lower two equal half of the distance, so when the size of the font-size is 0, it is not necessarily the picture can be absolutely vertically centered, then when the line-height-picture size== even when the absolute center, but for different browsers, The allocation method and default value of 1.14 may differ by 16. If the font size is 0, this time the baseline is a point or a line, different browsers have different differences, in short, for the above mentioned many lines between the distance is not fixed or symmetrical, need to get rid of the stereotype of 17. As you can see from the second figure below, the position of the Bureau in the game regardless of the upper and lower half of the impact of the case, only with the size of the font, and the median line is only related to the size of the font, you can determine that, as the font becomes larger, the median position and the absolute center of the gap will become larger 18. A inline-block element, if there is no inline inline element, or overflow is not visible, the baseline of the element is its margin bottom edge, otherwise, its baseline is the baseline of the last line of inline elements inside the element.