The css attribute that must be mastered--lineheight

1. The definition of line height

The line height refers to the distance between lines, that is, the distance between baselines. Only two lines of text will have two lines. A baseline, so why does a single line of text still have a line height? We look down with this question in mind.

2, Inline boxBoxModel

##

This It is a single line of text, and there is a content area tag.

##Figure 1

(content area ) is the box surrounding the text. We can think of it as the size of the text area selected by the mouse. Its size is only related to font-size. It can be thought of as the area where the text in Figure 1 is selected by the mouse. , that is, the area of ​​"single lines of text" selected.

(inline boxes) will not allow text to be displayed in blocks, but arranged in a line. Text wrapped by inline elements, such as the "content area" wrapped by the span tag, can be called an "inline box", while the part not wrapped by inline elements can be regarded as "anonymous content" "Linked Box". The "inline box" can be seen as the "content area" area within the span tag in Figure 1, and the "anonymous inline box" can be seen as the content wrapped by the red dotted line.

(line boxs), each line is a "line box box", and the line box box is composed of anonymous and non-anonymous inline boxes. It can be seen as the area wrapped by the outermost red solid line in Figure 1.

(containing box), this box is composed of "line box boxes".

The influence of line height is everywhere, even a single line of text is no exception.

The height performance of a single line of text is only affected by

, but mainly by the content area and line spacing. Single line text line height:

line-height = content area height + line spacing height

Then:

Line spacing = line-height - content Area height

The distance between the top of the text we usually see and the top of the "line box" is the half-line spacing.

(1), number

For example:

line-height:2;
font-size:20px;

Then the text occupies at this time The height is 20*2=40px

(2), length

For example:

font-size:20px;
line-height:20px;
line-height:2em;
line-height:3rem;
line-height:3pt;

has a fixed value in px, and the rest needs to be combined with the browser The default size is converted or calculated using the body's font-size

. (3)

<p>
    文字文字
    <p>这是p标签</p>
</p>
p{
font-size:20px;
line-height:150%;
}
p{
font-size:50px;
}

Then the line height of "text text" is 30px, and the line height of the internal p tag is also 30px, without recalculating the line height based on the child elements.

means that when setting the line height as a percentage, the parent element will inherit the line height calculated based on font-size

(4), normal

5, the application of line-height

(1), eliminate the distance between the picture

Figure 2

vertical-align

We can understand the ghost blank node here as a letter c. Because it is baseline aligned and the parent element does not set a fixed height, the height of the parent element is filled by the content. Since c needs to be aligned with the baseline of the image, so It will be on the lower edge.

Picture 3

1, make the picture blocky

2, picture vertical-align:

3，让匿名空白节点line-height:0

(2)，小图标大文字

<i class=&#39;icon&#39;></i>
<span>这是span标签内的文字</span>
span{
line-height:30px;
vertical-align:middle;
}
i{
vertical-align:middle;
}

(3)，图片水平垂直居中