摘要：中线基线顶线底线中线基线顶线底线是文本的几个基本线，其对应位置如下图基线小写英文字母的下端沿。中线小写英文字母的中间。将元素的基线与其父元素的下标基线对齐。将元素的基线对准给定长度高于其父元素的基线。
今日励志语
往日不可追，来日犹可期，祝大家2019年继往开来
迷之间隙我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下：
.nav { background: #999; } .nav-item{ display:inline-block; /* 设置为inline-block */ width: 100px; background: #ffffd; }
效果图如下：
我们从效果图中可以看到列表 item 之间有一点小空隙，但是我们在代码中并没有设置 margin 水平间距。那么这个空隙是如何产生的呢？
这是因为我们编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的，且对于多个连续的空白符浏览器会自动将其合并成一个，故产生了所谓的间隙。
对于上面实例，我们在列表 item 元素之间输入了回车换行以方便阅读，而这间隙正是这个回车换行产生的空白符。
同样对于所有的行内元素（inline，inline-block），换行都会产生空白符的间隙。
如何消除空白符从上面我们了解到空白符，是浏览器正常的表现行为。但是对于某些场景来说，并不美观，而且间隙大小非可控，所以我们往往需要去掉这个空白间隙。一般来说我们有两种方法来去掉这个换行引起间隙：代码不换行和设置 font-size。
代码不换行我们了解到，由于换行空格导致产生换行符，因此我们可以将上述例子中的列表 item 写成一行，这样空白符便消失，间隙就不复存在了。其代码如下：
但考虑到代码可读及维护性，我们一般不建议连成一行的写法。
设置 font-size首先要理解空白符归根结底是个字符，因此，我们可以通过设置 font-size 属性来控制产生的间隙的大小。我们知道如果将 font-size 设置为 0，文字字符是没法显示的，那么同样这个空白字也没了，间隙也就没了。
于是顺着这个思路就有了另一个解决方案：通过设置父元素的 font-size 为 0 来去掉这个间隙，然后重置子元素的 font-size，让其恢复子元素文字字符。
所以该方法代码如下：
.nav {
background: #999;
font-size: 0; /* 空白字符大小为0 */
}
.nav-item{
display:inline-block;
width: 100px;
font-size: 16px; /* 重置 font-size 为16px*/
background: #ffffd;
}
使用该方法时需要特别注意其子元素一定要重置 font-size，不然很容易掉进坑里（文字显示不出来）。
对齐问题由于 inline-block 属于行内级元素，所以 vertical-align 属性同样对其适用。
在正式讲解 vertical-align 之前，我们需要先说一些基本概念。
中线、基线、顶线、底线中线（middle）、基线（baseline）、顶线（text-top、底线（text-bottom））是文本的几个基本线，其对应位置如下图：
基线（base line）：小写英文字母x的下端沿。
中线（middle line）：小写英文字母x的中间。
顶线（text-top）：父元素 font-size 大小所组成的一个内容区域的顶部
底线（text-bottom）：父元素 font-size 大小所组成的一个内容区域的底部
vertical-align 的值
vertical-align 只接受8个关键字、一个百分数值或者一个长度值。下面我们将看看各关键字如何作用于行内元素。
baseline 默认元素的基线与父元素的基线对齐。
sub 将元素的基线与其父元素的下标基线对齐。
super 将元素的基线与其父代的上标 - 基线对齐。
text-top 将元素的顶部与父元素的字体顶部对齐。
text-bottom 将元素的底部与父元素的字体的底部对齐。
middle 将元素的中间与基线对齐加上父元素的x-height的一半。
top 将元素的顶部和其后代与整行的顶部对齐。
bottom 将元素的底部和其后代与整行的底部对齐。
打开微信扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117153.html
摘要：中线基线顶线底线中线基线顶线底线是文本的几个基本线，其对应位置如下图基线小写英文字母的下端沿。中线小写英文字母的中间。将元素的基线与其父元素的下标基线对齐。将元素的基线对准给定长度高于其父元素的基线。 今日励志语 往日不可追，来日犹可期，祝大家2019年继往开来 迷之间隙 我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下： 我 我 ...
摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。 今日励志 不论你在什么时候开始，重要的是开始之后不要停止。 前言 对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...
摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。 今日励志 不论你在什么时候开始，重要的是开始之后不要停止。 前言 对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...
摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。 今日励志 不论你在什么时候开始，重要的是开始之后不要停止。 前言 对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...
最近开始复习css一直在踩坑,今天分享一个inline-block 关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸置疑的可是关于兼容性就不是很让人满意,而浮动虽然很兼容可是觉得清除浮动就很麻烦,于此我在一些大型网站,例如我们的segmentfault的首页导航展示用的布局就是inline-block,觉得inline-block可以撸一...
阅读 640·2022-06-21 15:13
阅读 423·2021-11-22 09:34
阅读 1670·2021-10-20 13:48
阅读 764·2021-09-22 15:47
阅读 1168·2019-08-30 15:55
阅读 2964·2019-08-30 15:53
阅读 406·2019-08-29 12:33
阅读 605·2019-08-28 18:15
