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"

(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"

(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 box box"

(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"

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

3. The height mechanism of line height

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

line-height

, 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.

4, the unit of line height

(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

property

. (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

to the child element, and the child element will not be recalculated based on font-size. Row height, generally not commonly used.

(4), normal

Set the line height according to the browser's default line-height attribute.

(5), inherit

Row height inheritance IE8+

Inherits the row height setting of the parent element, which is usually applied to some input and button tags.

5, the application of line-height

(1), eliminate the distance between the picture

and the bottom of the container

Figure 2

Reason:

Inline elements are aligned by default to the baseline, and blank tags contain blank ghost nodes, which is equivalent to aligning a picture with a text , according to

vertical-align

:baseline, so there is spacing at the bottom of the image.

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.

When the parent element is set to a fixed height, the simple p contains a picture and the letter c. By default, the picture is aligned with the text baseline. In Figure 3, c is equivalent to a ghost blank node.

Picture 3

Elimination method

1, make the picture blocky

2, picture vertical-align:

bottom

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)，图片水平垂直居中

图三

图四

原理：

空白p内存在空白幽灵节点(看不见摸不着但存在空白元素中，例如图四中的)。

当设置text-align的时候，内联元素文字和图片会居中显示，我们让空白幽灵节点的行高与p高度一致，这样就可以实现垂直居中，图片和幽灵空白节点默认基线对齐，这时图片将偏上显示，我们设置图片的vertical-align为middle就可以实现图片近似居中的效果了。

如果想让图片完全垂直居中，我们可以让p的font-size:0，原因是不同字体的显示效果不同，有的下沉，有的刚好中线对齐，当font-size:0的时候，文字就变成一个点了，也就不存在不同字体的差异了。

(4)，多行文本垂直居中

图五

图六

原理：

我们可以把span看做是图片，这样原理就和图片垂直居中原理大同小异了。就是需要将span的元素display设置成inline-block，并且重置line-height和text-align。

为何display不能是inline属性，个人观点，如果还是inline元素的话，由于此时父元素的line-height过高，子元素设置的行高很小就没有作用（因为line-height达不到父元素行高的高度，所以看上去好像是无效的），类似于margin中的由于浮动或者绝对定位的无效的原因，我在另外margin篇有介绍，css中margin的深入了解，如果有兴趣可以去看看，如果设置子元素line-height设置很大的话是有作用的，所以只能让span元素为inline-block元素，inline-block具有包裹性,所以呈现出图六效果。

如果容器是自适应高度的，无法获得高度，那么我们可以让外部容器为表格元素居中。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

The above is the detailed content of The css attribute that must be mastered--lineheight. For more information, please follow other related articles on the PHP Chinese website!