1. The letter x baseline and CSS world
To learn inline elements, we have to mention the letters x, precisely because of x, inline elements before deciding on their own baseline (baseline), then with the baseline, only the line-height and vertical-align. Therefore, before learning content later, we must understand a concept:
The letter x is the edge line baseline inline elements (Baseline)!
Since x so important, so CSS gave it a special call, said x-height. As the name suggests, x-height refers to the height of the lowercase letter x, then the x-height there is no use of it? The answer is yes, as vertical-align: the definition is up 1/2 * x-height position of the middle of the baseline, so we see the vertical-align: middle in large font-size when it will not seem particularly " vertical center ", because not every character / letter of the letter x and all the same height, or that most of them are not the same.
Since the vertical-align: middle operation based on the need for x-height, then the CSS altogether the x-height to a higher status, further units derived from the relative dimensions ex, 1ex = x-height, so that unit will with font attributes change varies very unstable, it is not suitable for defining the size of the element, but in some cases, ex's performance is quite good. Such as: We need the following effects
Behind the text need to add an inverted triangle, this time we want the text and icons might help align vertical-align: middle, so that text and images are based on the center line alignment, due to the fact that the text itself is based on baseline typesetting, this time As long as we let the icon is also based on baseline layout is not on line yet? How to make icons that are also based on a baseline layout it? Add height: 1ex not get away with it? As follows:
<style>
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(/images/5/arrow.png) no-repeat center;
}
</style>
2. inline elements in real "row box box"
In the absence of a good basic knowledge of analytical inline box before, to add here about the basics of inline box, which is certainly helpful for knowledge and learning back. First we need to clear two unofficial concept: What is the line and the line box box box box what's the use?
What is the line box box? In fact, I do not dare say it is a box model given by the official, the authors did not mention, but he seems real for each row in the text, and this is the line as a unit, that is, each line of text (whether it they are not an anonymous inline tag or label produced), automatically generates a "line box box" on the outside. Note that this only represents the views I get from the books, in the back the specter of a node will continue to explore whether the official is given the box. That might not intuitive, look at an example of it.
This is my span label generation passage, he is automatically split into two lines browser, you can understand the outer wrapper is a line box box each line of text. So when it generates a line box box? Here I present two cases generate line box box alone personal test, the first is non-empty inline element, note that this is not empty, it is critical, the author seems to always ignore empty elements of the test, then I am empty element care about. The second is the internal inline-block elements automatically generated note here is empty, I do not know why the concrete, so the test results.
The second problem is that line box box what's the use? Why did the author to propose line box box? Because it helps us understand a lot of problems. First look at the following test code and the results they produced.
<div style="background: yellow;">
<span style="line-height: 40px">我行高40px</span>
<span style="line-height: 60px">我行高60px</span>
<span style="line-height: 30px">我行高30px</span>
<span style="line-height: 90px">我行高90px</span>
</div>
Div role at this time is like "line box box", since div wrapped up his party "line box box" (There is only one, two, things were different), This is done to make you more intuitive to see these final the final generation of inline elements "line box box", the resulting height is 90px, that is to say, the same line! Height inline elements generated row box frame, depending on the line-height of the top element. In order to deepen your impression of this result, I came alive again in a picture, or just a few elements, this time I put the width of the parent container div is compressed.
The final result of the test above with the same conclusion, the first high trekking 60px highest, the second highest 90px high trekking, two "boxes line box" a sum, obtained by 150px final, line box to box deep impression should be enough of it!
3. inline elements cornerstone of line-height
After understand the concept of line box of the box, look at line-height, will be much easier. As the cornerstone of inline elements, line-height full control of the height of the inline box, note that I said was in complete control, not a cent relationship with the font-size.
And think about the following questions, an empty div height is 0, the words written on the inside, and his height was softened, then this is the height of what from? First, it is certain that, by the distraction of the new text, inline elements, there is a class called kin "anonymous inline element", they wrap the outside did not label any inline element, but in fact they performance with inline elements the same, but you can not define your own individual style (of course you can go over some of the inherited from the parent, although inherited the lowest weight, but better than nothing). Well, we know that these words are anonymous inline element, so the height is the height of the inline element of distraction, then the height of the inline elements depends on what they do? Let's do two tests.
As the results, the final distraction height is line-height, rather than the font-size. Note here that the replacement of non-pure elements inline elements, the concept of replacement elements can look at the article before. You said before padding and border can affect the height of the element, then the inline element, whether it be? The answer is: No! But in some cases, there are some deviations visually. The following tests
<div style="background: yellow">
<span style="line-height: 40px;padding: 20px;border: 1px solid">我有padding和border</span>
</div>
Since the markdown editor supports tags language, so we can directly preview the final results are as follows (Tip: You can check the following elements to see the CSS styles directly through a browser)
I have padding and border
So for pure inline elements, his height calculation related only to line-height. line-height === pure inline element height! ! !
关于line-height的计算方式，作者“啰哩吧嗦”算了半天，我只总结成一个公式，line-height = font-size + 上半行距 + 下半行距 。对于CSS来讲，font-size是已知的，因此他只需要计算半行距即可，至于它是怎么算的，就没必要深究了。我只讲这个计算方式会导致一种情况，第一行文字和最后一行文字的上方和下方都只有半行距的距离，中间部分则是一个行距，如对样式有较高要求的可以考虑一下这个因素，用其他方式去弥补这里的高度差。
4.line-height在块级元素和内联替换元素中的疲软性
说完了line-height在内联元素中的表现，再来说说line-height在块级元素和内联替换元素中承担什么样的角色吧。
首先我们先来看简单的，line-height在块级元素中承担一个什么样的角色呢？答案是：屁用没有。当然，本章第三点的第一个例子就是在块级元素上直接写line-height属性，所以，还是有那么丁点作用的，这个作用是line-height无处不在的继承属性决定的，正好块级元素内的匿名内联元素自己写不了样式，那就只能继承父级的line-height了，所以line-height最终还是作用于内联元素，而不是块级元素。然后由内联元素生成的行框盒子相加，撑开了块级元素的高度。
既然line-height在块级元素中没用，那他在内联替换元素中又有哪些表现呢？这个等讲完vertical-align再总结。
5.深入line-height的各类属性值
本节的标题让人觉得摸不着头脑，line-height还有别的属性？还真没有，line-height就一个值，只是可以有不同的类型。
line-height的默认值是normal，注意不是none，还支持数值，百分比值和具体长度值。
首先要了解一下这个看上去就不一般的normal，normal本身是一个跟font-family有关的变量，而且在不同的浏览器中还有不同的计算值，因此对于还原设计稿的这种要求，我们不可能用默认的normal属性，同时由于line-height无处不在的继承属性，有时候不知不觉的你就把这个属性给改了，因此normal属性可以不讨论（我们一切以实用性出发）。
实际上，我们平时会设置line-height为具体的数值，如line-height:xx像素。这种做法完全适用于现在高要求的精致网站，对于需要高保真还原设计稿的需求，完全可以用用具体数值。当然也有一种情况你可以用数字或百分比，就是现在有很多网站有自己的设计标准，如微信小程序，ant-design之类的，他们会要求文章内部的行高是字号的1.3-1.4倍，文章标题的的行高是字号的多少多少倍，这种情况下你大可以根据设计要求，用比例计算方式来写行高。
这里我只推荐用长度值（1，2，3），而不是百分比值（100%，200%），你可能觉得1不是等于100%嘛，其实我也这么认为，一般都是按照喜好随便挑一个。事实上，这里面问题可大了去了。
长度值和百分比值的计算方式是完全相同的。都是font-size长度/百分比，向下取整，141.4 = 19.6 = 19px，注意不是四舍五入，是向下取整的。
那么长度和百分比哪里不同呢？答案是：继承方式，就是line-height中无处不在的继承方式不同。这里我们来看一个实例：
<div class="box box-1">
<h3>标题</h3>
<p>内容</p>
</div>
<div class="box box-2">
<h3>标题</h3>
<p>内容</p>
</div>
<style>
.box { font-size: 14px; }
.box-1 { line-height: 1.5; }
.box-2 { line-height: 150%; }
</style>
结果如下图所示：
最终表现得结果不一样，问题就在于这个继承方式。
使用数值，line-height = 本身的font-size*数值
使用百分比，line-height = 继承来的line-height*数值
你会发现，一个是基于自身的font-size，一个是基于继承的line-height，完全不同，而且数值在大多数情况下的表现更优，也更符合实际情况。所以我个人推荐不要用line-height的百分比值，就当没听过。
6.内联元素line-height的“大值特性”
其实这个问题并不能单纯的理解为，内联元素line-height取最大那么简单，其中还包含之前所说的“行框盒子”的内容，以及行框盒子产生的幽灵节点。在探索大值特性之前，我们得先了解一下，幽灵节点是什么。来看具体的实例：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<div style="background: yellow"><span style="display: inline-block;"></span></div>
</body>
</html>
注意这段代码必须要有声明。这段代码的结果是:
这里的span标签的高度确实是0，那么究竟是什么撑开了div的高度呢？就是上面提到的“幽灵空白节点”，你可以想象这个幽灵空白节点是一个没有宽度的空白节点，当然你不要去dom结构里找他，肯定是找不到的。在了解幽灵空白节点之前，先得知道，什么时候会出现这个幽灵空白节点，根据我的测试，结果跟作者的描述相同。
产生行框盒子的前面自动生成幽灵空白节点。由于之前提到了，inline-block元素内部可以生成幽灵空白节点，因此这里确实存一个一个看不见的内联元素，且他有自己的line-height。
幽灵空白节点的line-height = font-size（默认12px） * normal,因此这个幽灵空白节点就有自己的高度了，有自己的高度就撑开了inline-block的高度，inline-block又撑开了父容器的高度，那么现在就一切都说得通了。
做好了一切的准备工作，最后做个总结和检测，理解了下面这个案例，你就真正理解了内联元素的line-height。
<div class="box box1">
<span>span: line-height:20px</span>
</div>
<div class="box box2">
<span>span: line-height:96px</span>
</div>
<style>
.box {
width: 280px;
margin: 1em auto;
outline: 1px solid #beceeb;
background: #f0f3f9;
}
.box1 {
line-height: 96px;
}
.box1 span {
line-height: 20px;
}
.box2 {
line-height: 20px;
}
.box2 span {
line-height: 96px;
}
</style>
由于markdown编辑器支持标签语言，因此我们可以直接预览最终效果如下（小提示：你可以通过浏览器直接检查下面的元素看到CSS样式）
span: line-height:20px
span: line-height:96px
上面这两个box最终得到的高度是一样的，为什么会这样呢？
Just said, every non-empty inline element will give birth outside layer "line box box", and each row left the box blank box there is a ghost node, box1> span of line-height is 20px, but he lived next door the ghost blank nodes, inherits the parent element's line-height: 96px, we already know the height of the row by row box box top high inline elements determined, so the same final height box1 and box2, are 96px.
In this chapter too multi, vertical-align to speak into the next chapter, after learning of the vertical-align how we look at a combination of both multi-line elements vertically centered display, are interested can focus on follow-up article, a point of concern.