【 Front-End Talkking】CSS series – CSS in-depth understanding of line-height

1. Write at the front

I haven’t written an article for more than two weeks, and my hands are itching. I have been working at home from last weekend to this week while the company is renovating. Meanwhile, the company’s project is not urgent, so I took some time to sort out the understanding of LINE height in CSS.

2. Basic concepts

2.1 Definition and diagram of line height

Line height, as the name implies, refers to the height of a line of text. By definition, it is the distance between two lines of text and the baseline. So the question is, what is a baseline? If you recall when we first started learning Chinese pinyin, we used the four lines of the four-line grid book, and the penultimate line was the baseline. If you say, sorry, I have returned all the lines to the teacher, there is no impression. The bottom line of a, C, E, X, and Z is the base line.

Now that we know the definition of baseline, let’s talk about line-height. As mentioned above, the row height is the distance between the two baselines, as shown in the figure below.

Everyone is already 😓, everyone patiently look carefully, in fact, very good understanding:

• The distance between the two red lines is zeroLine height.
• The distance between the bottom line of the previous row and the top line of the next row isspacing, the industry consensus is: line spacing =line height -em-box, so CSS language to explain the line spacing =line-height-font size.
• The distance between the top line and the bottom line of the same line isfont-size.
• One half of the line spaceHalf spaced.

Combining the above image with the text description, it is easy to figure out the meaning of line height, line spacing, half-line spacing, and font size. It’s important to understand these definitions, because what follows is relevant to these definitions.

2.2 Content area, inline box, line box, contain box

A picture is worth a thousand words:

Content area: The content area can be roughly interpreted as the area with a background when text is selected in FireFox/IE. In the figure above, the dark gray background area is the content area.

Inline: Each inline element generates an inline box whose height is equal to font size. When we set line-height, the inline box’s height remains the same.

Line box: refers to a virtual rectangular box of the line, consisting of the inner box of the line. When you have multiple lines of content, each line has its own line box.

Include box: the box that wraps the above three kinds of boxes is confused, look at the picture directly, the yellow box above is the contain box.

3. Understand line-height

3.1 Line-height attribute values

The default value of line-height is normal. It also supports values, percentage values, length values, and inheritance. Take a look at the table below:

value	describe
normal	The default. Set reasonable line spacing.
number	Sets a number that is multiplied by the current font size to set the line spacing, i.e. number is a multiple of the current font size.
length	Set a fixed line spacing.
%	Percentage line spacing based on current font size.
inherit	Specifies that the value of the line-height attribute should be inherited from the parent element.

• normal

When you use line-height, you make it very small. Why? Normal is a variable value closely related to font-family. Such as:

div{
    line-height: normal;
    font-family: 'microsoft yahei';
}
Copy the code

and

div{
    line-height: normal;
    font-family: 'simsun';
}
Copy the code

The two pieces of code tested in different browsers are as follows:

The font	Chrome	Firefox	IE
Microsoft jas black	1.32	1.321	1.32
Song typeface	1.141	1.142	1.141

As you can see from the table above, after specifying a font, line-height resolves to roughly the same value in different browsers. However, different browsers use different default fonts, and different operating systems use different default fonts. Therefore, in actual development, we need to reset the line height.

• inherit

  The value of the parent element is the same as the value of the current node’s line-height. If the child of the current node does not set any line-height, the child of the current node will have the same value.

• length

  (height: 21px, height: 1.5em, etc.) If the current font size is 14px, then the calculated value is 1.5*14px=21px.

• number

  For example, height: 1.5, the final value is multiplied by the current font size. For example, if the font size is 14px, the final value is 1.5*14px=21px.

• %

  For example, if font size is 16px and line-height is 120%, then the calculated line height is 19.2px.

Font-size: 150%; font-size: 150%; line-height: 150%; Are they interchangeable? In fact, line-height:1.5 is a little different from the other two inheritance details, so let’s go straight to the example.

body{ font-size: 14px; The line - height: 1.5; } body{ font-size: 16px; line-height: 150%; } body{ font-size: 14px; The line - height: 1.5 em. }Copy the code

For the element, the height of each of the three methods is 21px, but if there are children under the body element, for example:

<body>
    <h3>This is a title,</h3>
    <p>This is the content</p>
</body>
Copy the code

h3.p{
    margin: 0;
}
h3{
    font-size: 32px;
}
p{
    font-size:  20px;
}
Copy the code

Line height: 150% and line height: 1.5em

When line-height:1.5 is set, the final result is that the two lines do not overlap, and the typesetting is good, as shown in the picture below:

Set line-height to 150% and line-height to 150%

< P >

< P > < H3 > < P > < H3 > < P > < H3 > < H3 > < P > < H3 > < H3 > < P > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 > < H3 >

The final calculation method of line-height under different attributes is compared as follows.

Set mode	line-height	The calculated line-height	The child element inherits line-height
inherit	The line-height of the parent element	Don’t calculate	The line-height of the parent element
length	20px	Don’t calculate	20px
%	150%	Font-size (14px) * 150% = 21px	Inherit the computed line-height of the parent element to 21px instead of 150%
normal	If 1.2	Font-size (16px) * 1.2 = 19.2px	Font-size (32px) * 1.2 = 38.4px
The pure digital	1.5	Font-size (14px) * 1.5 = 21px	Font-size (32px) * 1.5 = 48px

Therefore, in practical development, we usually set the line height to ‘pure number’ is the most recommended method, because it will scale with the corresponding font size, and typesetting is good.

3.2 “high value characteristic” of line-height

Now, please read the following code carefully:

<div class="box">
    <span>Here's the content...</span>
</div>
Copy the code

.box{
    line-height: 50px;
}
.box span{
    line-height: 10px;
}
Copy the code

and

.box{
    line-height: 10px;
}
.box span{
    line-height: 50px;
}
Copy the code

What is the height of div? Correct answer: 50px for both. See figure

It doesn’t make sense, so read the explanation.

First, we should always keep in mind that the inline element is preceded by an invisible “ghost blank node”, so the HTML code above could be equivalent to:

<div class="box">Ghost blank node<span>Here's the content...</span>
</div>
Copy the code

So, when the.box element is set to line-height:50px, the “ghost blank node” is set to 50px, and when the.box element is set to line-height: At 20px, the height of the span element changes to 50px, and the height of the box element is always the largest because the height of the inline box is determined by the highest box. According to Zhang Xinxu’s summary, this can be called the large value characteristic of the height of the line height. I don’t know if that makes sense to you?

3.3 Line-height and inline element “vertical center”

• Line height makes single line text “vertically centered.”

If you are like me, when you first start writing CSS, you can set the value of line-height to the same as that of height to achieve the effect of vertical center of text.

.title{
    height: 50px;
    line-height: 50px
}
Copy the code

In fact, we only need to keep the line height property, there is no need to set the height at all.

<div style="height: 50px; background-color: #cd0000; color: #fff">
    <span style="line-height: 50px">Element element element</span>
</div>
Copy the code

Set line-height to the size of the box you want to center a single line of text vertically.

• Line height allows multiple lines of text to be “vertically centered”

To create a vertical center effect for multiple lines of text, use the help of a friend of line-height.

<div class="box">
    <div class="content">Based on line height is the realization of multi-line text vertically centered... I found that the text is very short, so casually wrote a little text to make up the number..</div>
</div>
Copy the code

.box{
    line-height: 120px;
    background-color: #cd0000;
    color: #fff;
}
.content{
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}
Copy the code

The effect picture is as follows:

The implementation principle is as follows:

1. Multiple lines of text are wrapped with a label and set simultaneouslydisplay: inline-block, preserving the inline nature of the element, giving the element a single line effect. This setting makes the element a crucial “line box”, and each line box is accompanied by a “ghost blank node” (0 width, but behaves like a normal character). And we set the outerline-height: 120pxAnd, therefore,.contentContent “ghost blank node”line-heightIt will also be 120px;
2. Inline elements are baseline aligned by default, by settingvertical-align:middleWe can achieve the vertical center effect that we want.

3.4 Is it really “vertically centered”

I wonder if you have noticed that the vertical center of single-line text and multi-line text is quoted. Isn’t that true? Yes, the vertical center implemented by line-height is only approximately vertical center. Why approximate? Let’s take an example:

<p>Microsoft jas black</p>
Copy the code

p{
    font-size: 80px;
    line-height: 120px;
    background-color: #cd0000;
    color: #fff;
    font-family: "Microsoft YaHei";
}
Copy the code

In the browser (Windows) it looks like this:

Can you see that the text is clearly down here. Because some fonts are lower, such as “Microsoft Yahei”, the font size is basically between 16 and 18px when we use it. Although the font is sunk, it is a deviation of 1px, which is completely invisible to our naked eyes. Therefore, “vertical center” with line-height is not absolutely vertical center.

Similarly, the vertical center of multi-line text with line-height and vertical-align is not absolutely vertical center. In the above example of multi-line text with vertical center, we can obviously see that the font position is downward.

It’s his best friend Vertical-align. We’ll explain that in our vertical-align post.

4. The last

This is the introduction of line-height. Usually we should think more and summarize more, then we will have a new experience. In the future, my latest articles will be updated in the public account < front-end Talkking>, welcome your attention.

The above is the whole content of this article, thank you for reading, if there is an incorrect statement, welcome to leave a message correction! 😄

Ps: this two days is the annual college entrance examination, think about their own college entrance examination almost over the past 10 years, and now they seem to have no achievements, think good shame, work hard, young!!

reference

• Zhang Xinxu CSS World
• [Learning Note] Line-height in the CSS

---

You may wish to pay attention to my wechat public account “Front-end Talkking”.