First, we must clearly define the line-height, line-height refers to the distance between the two text baseline.
Inline boxes box model
Style performance all inline elements are related to the inline box box model. So this concept is very important.
<P> This is a paragraph of text, there is a <em> em </ em> tag. </ P>
As the above paragraph ordinary code, it contains . 4 Species box:
1) "content area" (content area), is an invisible box around the text, it is understood to select the text on a blue background area, as shown below. "Content area" related to the size of the size of the font-size;
2) "in-box" (inline-boxes), "in-box" will not allow the contents to the display block, but arranged in a row. If the text-containing external inline horizontal labels (such as span, a, em, etc.), belong to "in-box" at block follows purple FIG. If the text is bare, it belongs to "anonymous inline boxes" red box below;
3) "Box line box" (line boxes), each row is a "line box box", each "line box box" in turn one by one "in-box" composition, "block line box" as half moon Office;
4) <p> tags where "comprising box" (containing box), as shown below red box. This box consists of one line "Line box box" component
Line-height is the height of mechanism
One question: element height come from it? Is the text inside the distraction of it?
Answer: No, not a distraction from the text, in fact, is determined by the line-height.
Then you may be asking: line-height obviously two baseline distance, a single line of text where's the line high?
On this issue, we need to know is:
1) line of succession because of its high impact everywhere, even single line of text is no exception.
2) high line just behind, height is not a line of high performance , but the content area , and line spacing .
The content area + row spacing = line height, just the height of the row height equal to the performance, giving the impression that the row height played a role.
1. The content area height only with the font size and font -related, has nothing to do with the line-height.
2. Under simsun (italicized) font, the content area is equal to the height of the text size value .
Therefore, in simsun (Times New Roman) fonts:
font-size + = line-height line spacing
That line spacing can be so calculated:
font- size: 240px; Line - height: 360px; the row spacing = 360px - 240px = 120px;
Vertical split line spacing, there is a "half line pitch."
= Half-line spacing (lines high - content area height) / 2
to sum up:
High decisions inline row height of the box, but the performance is expressed by the height of the line spacing and the content area; fence line spacing, large or small (or even negative), its role is to ensure that exactly equal to the height of the box with the line height.
Second question: If the line box inside the box there are a number of different line height of the inline box height will then show how to do? Row height is determined by the highest inline box do?
Answer: wrong. Single-line text height is the height of the accumulated multi-line text.
Three questions: If the line box inside the box mixed inline-block level elements (such as pictures), the height of what performance?
line-height all kinds of property values
- normal default property values, different browsers behave, and fonts associated with the element.
- <Number> using a numerical value as line height, font-size is calculated according to the size of the current element
- <Length> length value using specific values as the line height
- <Percent> percent value used as the line height value, corresponding to the elements of the set line-height of the font-size attribute size calculated
- inherit row height inheritance. Input boxes and other elements such as the default row height is normal, you can make use of text styles inherit more controllable.
There are different application elements:
line-height: 1.5 inheritable all the elements according to their font-size of the line height is recalculated. Recommended Use
line-height: 150% / 1.5em The high current element font-size calculation line, directly to the following succession of elements.
Global Value line high body experience
body{ font-size: 14px; line-height: ? }
20-pixel matching experience - easy mental arithmetic
line-height = 20px / 14px ≈ 1.4286
body{ font-size: 14px; line-height: 1.4286; }
line-height picture with performance
Row height will not affect the actual height of the image occupied?
The answer: no.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
background-color: #ccc;
}
span{
background-color: white;
}
</style>
</head>
<body>
<section>
<p>
<img src="./123.jpg" /><span>xxxxxxx</span>
</p>
</section>
</body>
</html>
The following picture, the picture will be aligned with the baseline of the text on the right.
When we span the height change it, you can see to be aligned with the text baseline, p height of the high.
span{ display: inline-block; height: 50px; background-color: white; }
From the above, the row height to change the height of the container only vertical-align text and line height variation common role of picture height is occupied by its original height .
Here we look at,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
background-color: #ccc;
}
</style>
</head>
<body>
<section>
<p>
<img src="./123.jpg" />
</p>
</section>
</body>
</html>
效果如下图，右边没有文字了，但下面还是会有一点空。
原因是：
对于一个block元素，后面就像有一个文本节点在里面一样，看不到，获取不到,称之为隐匿文本节点。内联块级元素img默认对齐方式是基线baseline，要与文本对齐，文本存在line-height，所以存在间隙。
那么如何消除图片底部的间隙呢？
方法1：图片块状化 ——无基线对齐
img{
display: block;
}
方法二：图片底线对齐
img{ vertical-align: bottom; }
方法三：行高足够小——基线上移
p{ background-color: #ccc; line-height: 0; }
方法四：消除隐匿文本字体大小
p{ background-color: #ccc; font-size: 0; }
小图片和大文字
基本上高度受行高控制。
line-height 的实际应用
图片水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
background-color: #ccc;
line-height: 300px;
text-align: center;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<section>
<p>
<img src="./123.jpg" />
</p>
</section>
</body>
</html>
效果如下：
多行文本水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
line-height: 250px;
text-align: center;
background-color: #ccc;
}
span{
display: inline-block;
line-height: normal;
text-align: left;
vertical-align: middle;
}
</style>
</head>
<body>
<section>
<p>
<span>
多行文本水平垂直居中实现的原理和图片的实现是一样的，区别在于要把
多行文本所在容器的 display 转换为和图片一样的 inline-block，以及
重置外部继承的 text-align 和 line-height 属性值。
</span>
</p>
</section>
</body>
</html>
效果如下：
