摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。
上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内联盒模型相关的东西，这里保持了与上一篇类似的结构，先来说说概念，然后是度量单位，最后来聊一个常见的内联元素的现象。
内联盒模型相关概念说到盒模型，只要了解css的基本都知道这个概念，但说到内联盒模型可能很多人不是特别清楚。现在我们就来说说内联盒模型几个重要的概念。先看图概览一下，再逐项往下看。
Tip: 图中用不同颜色的框标注了很多框，这些代表我们下面要说的不同的盒子或不同的概念。
inline-boxinline-box又名内联盒子，通常由一些标签包裹形成，最常用的如标签包裹文字会形成内联盒子，那些没有标签包裹的文字默认自己形成一个盒子称为anonymous inline box匿名内联盒子。
line-boxline-box名为行框，从名字就可以看出，它是由单行内联元素形成的一个区域，注意是每一行都会形成，如果文字由五行，就会形成5个行框。行框的高度基本上是由行框中行高最大的内联盒子决定的。我使用基本上这个词，是因为还有其他情况，比如受到vertical-align属性的影响。
containing-boxcontainer-box就是包含块的意思，在内联元素中，包含块是由行框组成的。说白了就是包裹在所有行框外面的那层盒子。
struct这个词可能很多同学见的比较少，张鑫旭大神称之为”幽灵空白节点“，我们这里就用直译过来的词”支柱“。
在CSS规范中有这么一句话，Each line box starts with a zero-width inline box with the element"s font an d line-height properties. We call that imaginary box a ”struct"。翻译过来意思就是每一个行框开始的位置都有一个宽度为0，并且行高和字体大小都与该元素相同的内联盒子。这个假想的内联盒子就被称为“支柱”。简单来说就是可以想象成行框前面有一个宽为0的空字符。
可能有的人会问，这个东西有什么用那？(⊙v⊙)嗯，用处大了去了，由于其几乎无处不在的特性并且由于宽度为0，我们平时在内联元素中遇到的很多奇怪的问题都是由“struct”引起的。我们暂时先放下这个，文章的最后我们再看这个东西引发的问题。
度量单位这一部分说说行高的单位，我们不再列出所有的单位，因为这些完全可以从官方文档上看到，我们这里只说说重要的或者说容易错的部分。
默认值line-height的默认值是什么，查下手册我们就能很容易的看到，它的值是normal，那么normal是多大？从我的理解来说，它的值受到font-family和浏览器的影响，IE/Firfox与chorme表现存在部分不一样的地方。但可以知道的是normal的初始值与字体的content-area的区域高度相同。不了解content-area的同学可以去看我的上一篇文章的line-height部分。这里简单说一下，inline水平的元素设置背景后，背景部分就是内容区域的部分，与初始line-height同高。
百分比、em和数值的区别百分比和em与数值的区别在于继承性质上的不同，百分比和em被继承的是计算后的值，而数值类型的继承的是一种“计算规则”。
常见问题这一部分我们来说一说常见的内联元素的一些问题。
display: inline-block元素间的空隙这个问题，大家都遇到过，大家可以看看我做的实例的第一部分。首先我们会看到元素和元素之间的一定的间隙。这个间隙会引发的问题有，如果我们设置两个display: inline-block的元素宽度为width: 50%都向右或向左浮动，但是确无法排在一行的情况。这就是由于多出了这一点间隙，导致容器宽度不足，最后容器一行无法放不下两个宽度都为容器一半宽度的元素。
有人可能觉得这些元素间的间隙比较奇怪，但这是一种正常现象，因为内联元素本来的排版就应该有间隙，你能够想象文字和文字之间没有间隙的情况吗？内联元素之间本来就应该独立分开。怎么解决这个问题，网上也有很多答案，这里只简单提一下，因为我们主要说的是原理嘛。通过设置font-size为0，或者使用letter-spacing属性，都可以达到去除内联元素之间的间隙的目的。
在我实例第一部分中应该很多人也注意到，在父容器的最底端也有一个空隙，这个到底是什么那？还记得我上面概念中提到的struct吗，这种现象就是由这个东西引起的，由于其不可见，所有我们用一个内联元素x来代替。这里可以看实例的第二部分。这个现象的原因是由于内联元素是默认vertical-align元素对齐的，而我们的内联元素的基线是默认为元素的底边缘，sturct元素又有自己的行高，当它的基线与我们的内联元素对齐时，它的行高会撑起一部分距离，就出现了实例中的现象。
知道了原因，我们解决起来也很简单。只要struct元素的行号为0就可以了，所有我们可以设置父元素的line-height: 0或者通过设置font-size: 0来间接设置line-height为0。可能已经有人法相，font-size: 0可以同时解决元素间的间隙和底部的间隙，所以我更喜欢用这个方法。
下面我们做一下其他的操作，我们在实例第三部分中，前面三个inline-block元素中加上文字，发现元素都往下移动了，这又是什么原理那。这其中就涉及到了vertical-align属性的一些性质，我们下一篇就来讲讲vertical-align，并且来说说这种现象的原因。
文章中如有错误的地方，或者您有更好的建议欢迎指正~，原文链接。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113105.html
摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。 张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义 行高：两行文字基线之间的距离 为何是基线：基线是定义所有字线的根本 不同字体...
摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...
摘要：但实质上，只要是内联元素，这两个元素都会同时在起作用。而解决方案可以有以下几种元素不使用基线对齐，可以改为对齐元素块状化设置为设置为总结讲解了的各类属性值及其效果起作用的前提是内联元素与都是同时作用在内联元素上的 前言 vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。也就是说，对于块级元素，vertical-align...
摘要：的应用大部分时候，我们设置，都是为了垂直居中对齐。然后我们给设置，这样我们就可以重置设置的，又因为保持了内联特性，因此我们可以设置以及产生，从而实现近似垂直居中对齐。 前言 行高，顾名思义是一行文字的高度，而从规范上来说则是两行文字基线之间的距离。行高是作用在每一个行框盒子(line-box)上的，而行框盒子则是由内联盒子组成，因此，行高与内联元素可以说是非常紧密，行高直接决定了内联元...
阅读 2812·2023-04-25 20:06
阅读 1429·2021-08-26 14:15
阅读 2183·2021-08-12 13:27
阅读 1743·2019-08-30 15:55
阅读 3430·2019-08-30 13:20
阅读 2800·2019-08-29 15:12
阅读 3308·2019-08-29 15:06
阅读 2836·2019-08-29 14:13
