Deeply understand the use of line-height in CSS
What is line-height (line height)?
Line-height refers to the distance between the baselines of two lines of text.
What is the baseline?
Base line, bottom line, top line, middle line
Note: The
base line is not the lower edge of Chinese characters, but the lower edge of the English letter "x".
Different fonts have different baselines.
What is the inline box model?
We explain through the following code
<p>这是一行普通的文字，这里有个<em>em</em>标签</p>
In this code contained in the cassette 4:
Content Area content area refers to a region (the line element display: inline background-color can bottom and top metal line parcel
shown sex), not necessarily visible in practice, but it does exist. The size of the content area changes according to the value of font-size and the number of words.
inline boxes. Inline boxes do not arrange the content in blocks, but line them up. If the external inline level label (span, a, em, etc.) belongs to the inline box, if it is bare text, it belongs to the anonymous inline box.
line boxes. Each line is a line box. Each line box is composed of inline boxes.
containing box contains box. The containing box is composed of line box boxes line by line. <p>The label represents a containing box. (The green part in the figure above)
The height mechanism of line-height has an in-depth understanding of the height performance of inline elements:
Before explaining the principle, let's look at the following code:
<p>这是一行普通的文字，这里有个<em>em</em>标签</p>
console.log(document.querySelector('p').clientHeight); // 输出36px
Now we think about the following questions: Where does
the height of the element come from?
<p>这是一行普通的文字，这里有个<em>em</em>标签</p>
<p>这是一行普通的文字，这里有个<em>em</em>标签</p>
console.log(document.querySelector('p').clientHeight); // 输出36px
Is it supported by the text inside?
the answer is: the height of the element is determined by the line-height:
line-height is clearly the distance between the two baselines, where does the line height of a single line of text come in and controls the height?
Because of its inheritance, line height has influence everywhere, even single-line text.
The performance of height is not the line height, but the content area and line spacing.
Content area height + line spacing = line height The
content area height is only related to font size and font, and has nothing to do with line-height. (In simsun font, the height of the content area is equal
to font-size). In other words, in simsun font: font-size+line spacing=line-height
line spacing is equally divided up and down.
Summary: The
row height determines the height of the inline box; the row spacing is a wall of grass, can be large or small (even negative), and ensure that the height is exactly equal to the row height.
The height of multi-line text is equal to the cumulative height of single-line text.
The various attribute values of line-height are
normal
line-height: normal; The default attribute value is related to the browser and is related to the element font.
line-height:1.5; Use the value as the line height, calculated according to the font-size of the current element.
line-height:1.5em; 、 line-height:1.5rem; 、 line-height:20px; Use specific units as the line height value.
line-height: 150% Use percentage as the line height value. Relative to the font-size of the element with the line-height attribute set.
inherit
input{line-height:inherit;} ,行高继承。使用 inherit 可以让文本框样式可控性更强。the line height defaults are inherited,
why are we doing this? ? ? The default row height of the control element is normal instead of inheriting the row height of the parent element.
The difference between line-height:1.5, line-height:1.5em; and line-height:150%
is the same in the calculation result, but the affected elements are different.
line-height:1.5 All inheritable elements will recalculate the line height according to font-size. (That is to say, its child elements will
calculate the line height according to their own font-size * 1.5, and each child element must be calculated once.)
line-height: 150%/1.5em, the current element calculates the line height according to the font-size, Inherited to the following elements. (The current element is based on
The font-size calculates the row height, and then inherits the calculated value to the descendants, which means that only the current element is required for calculation, and the child elements do not
need to be recalculated. )
Experience of using body global value.
If it is a blog or web page that has been read as the main one, line-height: 1.5/1.6 is more appropriate.
If it is a user-oriented web page and is not a reader-oriented web page, it is recommended to use experience matching 20 pixels.
body{font-size:14px;lineheight：1.4286} 或者合并形式 body{font:14px/1.4286 'microsoft yahei'}
line-height 与图片高度表现。
line-height 不会影响图片的高度。
Hidden text node: The <p> label is a text node, which has text by default. Even <p></p>when the content is empty, there are text nodes, but they are not visible. Such nodes are called hidden text nodes, and it is precisely because of the existence of hidden text nodes that the situation in the following figure is caused.
How to eliminate the gap between the picture and the bottom?
In project development, we occasionally encounter the following situations:
There are three main solutions:
1. The picture is blocky. (vertical-align) only applies to inline and inline-block elements, that is to say, there is no baseline alignment argument for block elements.
img{display:block;}
2. Align the bottom line of the picture
img{vertical-align:bottom;}
3. The row height is small enough to make the baseline move up.
.box{line-height:0} line-height的实际应用
1. Achieve images with variable sizes and vertical centering of multi-line text
2. Realize the horizontal and vertical centering of multi-line text
