First, the definition of line-height and the summary of working principle
property values for Line-height:
- Normal sets a reasonable line spacing by default.
- Number, which is multiplied by the current font size, to set the line spacing line-height:1.5;
- Length sets the fixed line spacing. For example: line-height:18px;
- Percent line spacing based on the current font size. For example: line-height:150%;
definition of Line-height:First of all, the text of the four lines from the top to the bottom four lines, respectively, line, line, Baseline, the bottom line. Among the attributes in Vertical-align are top, middle, baseline, bottom and four lines.
Row Height:Refers to the height of a line of text. In particular, it refers to the distance between the baseline between two lines of text.How the Line-height works:Inline format models (inline formatting model)contain boxThe content area is largely propped up by font size.Inline BoxThe inline box is just a concept, it can't be displayed, but it does exist. In the absence of other factors, the inline box equals the content area, while the set row height increases or decreases the height of the inline box, that is, the line spacing value (row height-font size) is divided by 2, which is added to the upper and lower sides of the content area, respectivelyLine Box The line box refers to a virtual rectangle of the bank, and there is an article that says its height is equal to the highest value in the row of all elements in the bank, such as when I recognize the explanation:its upper and lower bounds are the highest and lowest points of all inline-box in the line, respectively. such as: The difference between the two is that the former inline box is the use of span, the latter with a Div. (both set Display:inline-block) description for sibling elements, inline elements are perpendicular bisector aligned, and block-level elements are closer to the bottom line.
Reference article:
Detailed Description: Row height: Line-height Property
more in-depth: CSS inline format mode (line-height principle)
Characteristics of Line Heights:
Vertical Centering Line-height's final performance is achieved through the inline box, regardless of how much height the inline box occupies (whether it is larger or smaller than the text), and the space it occupies is perpendicular bisector to the common level of the text content. This important feature can be used to achieve vertical center alignment of text or pictures.Inheritance of row heights:The row height is set to a specific value (PX/EM), and the percentage (%) is inherited using the font-size of the parent element after the calculation of the specific value. Normal can be calculated based on the different font-size values of the child elements, but the browser has subtle differences in interpreting the scale of the normal. The best solution: pure numbers such as: 1.5. The line-height is calculated based on the child element Font-size.
references: In-depth understanding of CSS line Height propertiesPrecautions :The browser defaults to setting the text to Line-height. Different settings for different browsers. In general will reset.css reset Line-height, so when the layout encountered text to remember to set the Line-height whether to meet or reset 2017-01-19
Line-height Series--Definition and Working principle summary
