CSS Line-height Concepts and examples

This article was also published in HTTPS://GITHUB.COM/ZHANGYACHEN/ZHANGYACHEN.GITHUB.IO/ISSUES/37

Defined

The distance between the two lines of the text baseline.

The approximate position of the baseline

The position of the baseline can be seen as the position of the lower edge of the X letter.
There is a slight difference in the baseline position of different fonts.

Several lines in the text:

Row Height:

The line height of a line of text is: Top spacing + text height + lower spacing, and the top spacing is equal to the bottom spacing.
We can also basically think of this: row height is the distance between two lines of text baseline, and the distance between the top lines of two lines of text, and the distance between the lines of text in the line.

Inline box model

• Contents Area Content Areas
• Inline box Inline Boxes
• Wireframe Box Line Boxes

• Includes box containing box

  Contents Area Content Areas

Around the invisible area of the box, the size is related to the font-size, and the height is the height of the text in the illustration above. We can understand the color area after the selected text.

The content area is only related to the font size and the line height.
Under the italicized word body, the content area height = font size. Under other fonts, the content area height ≈ the font size

Inline box Inline Boxes

The inline box does not let the content appear as a block, but instead appears as a line, which is an inline box if it contains an inline label (SPAN,A,EM, etc.). If there is only text, it is "Anonymous inline box".

Wireframe Box Line Boxes

Each line is a box of rows and boxes, each of which is made up of an inline box.

Includes box containing box

Consists of a row-by-box box in a row.

In summary: Included boxes include inline box boxes including inner boxes

Property value of Line-height

• For block-level elements, line-height specifies the minimum height of the inner line-boxes of the element
• For non-substituted inline elements, line-height is used to calculate the height of the Line-box

• There is no effect on overriding inline elements, such as input, button,line-height

  Normal

Depends on the user agent. Desktop browsers (including Mozilla Firefox) use the default value, which is approximately 1.2, depending on the font-family of the element.

line-height: normal;

Number

The value used is no unit value

line-height: 3.5;

Length

Specified

line-height: 3em;

Percentage

is related to the font size of the element itself. The calculated value is the given percent value multiplied by the font size calculated by the element.

line-height: 34%;

Inherit

ie8+
The default row height for elements such as the input box is normal, and you can use

line-height: inherit ;

Make the element more controllable.

The difference between line-height:1.5, line-height:150% and Line-height:1.5em

The effect of EM is the same as%.

line-height:1.5

All inheritable elements recalculate row heights based on Font-size.

<div   id=   "father"  >  <div   id=   >  my font-size is 60px </DIV>  </div>< /span>  

#father{        font-size:12px;    line-height:1.5;    width:300px;}#son{    font-size:60px;    color:white;}

At this time, #son元素的line-height for 60*1.5=75px;

Line-height:150%/line-height:1.5em

The current element calculates the row height based on font-size, inheriting the computed value to the following element.

<div   id=   "father"  >  <div   id=   >  my font-size is 60px </DIV>  </div>< /span>  

#father{        font-size:12px;    line-height:150%;    width:300px;}#son{    font-size:60px;    color:white;}

At this point the line-height of the #son element is 12px*150%=18px. Because the text box height of the #son element is 60px, the half-line spacing of the #son element is approximately equal to (18-60)/2 = -21px; So the two lines within the #son element are coincident.

It is recommended to assign values to line-height with no unit value

Line-height and the performance of pictures

<div>     src="muke/resource/photo/1_0.jpeg"></div>

div{      background-color:#abcdef;}img{      width:300px;      height:300px;}

Notice that there is a narrow gap below the picture so that the height of the image cannot fill the height of the parent container.
Now add some text after the picture:

<DIV>    src=   "Muke/resource/photo/1_0.jpeg"     >  <SPAN>  xxxx I am the text after the picture </SPAN><BR>  </DIV>   

div{      background-color:#abcdef;}img{      width:300px;      height:300px;}span{       background-color:white;}

Notice that the bottom of the picture is aligned with the lower edge (baseline) of the letter x, so we can think of the picture in order to align with the baseline of the text after it (no text can be imagined as text after the picture), so there is a small gap underneath the picture. Why is the picture aligned with the baseline of the text? Because the Vertical-align property defaults to baseline. Have time to study vertical-align this attribute later.

How to remove the space below the picture

• Align the bottom of the picture

img{      width:300px;      height:300px;      vertical-align:bottom;}

In this way the picture is aligned with the bottom line of the text, and the gap is eliminated.

• Picture blocky

img{      width:300px;      height:300px;      display:block;}

Because vertical-align this property is only valid for inline elements, turning the picture into a block element can invalidate the vertical-align:baseline.

• The line height is small enough to make the baseline move up

div{      background-color:#abcdef;      line-height:0;}

Here is a question, when the baseline is supposed to be higher than the bottom of the picture, why the picture is not aligned with the baseline?

Single-line text vertical centering principle

<div>     单行文本垂直居中</div>

div{      background-color:#abcdef;      height:300px;      line-height:300px;}

Center text, which is half of the text content area and the top of the content area to the parent container edge = Half the height of the parent container. and the content area top to parent container upper edge = top spacing = bottom spacing, so the text content area + top spacing + bottom spacing = parent container height. Because the text content area + top spacing + bottom spacing = line-height, when line-height = height, single-line text is centered. That is, the midline of the text is approximately coincident with the middle line of the parent container.

Center multiple lines of text

<div   id=   "father"  >  <div   id=   >  multiline text vertically centered <BR>  multiline text vertically centered <br>  multiline text vertically centered <BR></DIV>  </DIV>   

#father{       line-height:300px;       background-color:#abcdef;       height:300px;}#son{       line-height:normal;       display:inline-block;       vertical-align:middle;       border:1pxredsolid;}

The multiline text is centered, and we can look at the multiline text as a whole, one line, and the question is centered on the single line of text above, so we let the parent element's height = line-height. In order to overwrite the inherited line-height, we use line-height:normal in the #son element. Look at the effect:

Seems to be biased somewhat, in order to let the middle line of the whole text and the parent container approximate coincident. We can add Vertical-align:middle. Let the whole place in the middle of the parent element, and the effect is the effect of the picture that starts in this section.

Reference: http://www.imooc.com/learn/403
http://www.imooc.com/article/7767
Https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

CSS Line-height Concepts and examples