vertical-align 属性的基线baseline, 你确定了解嘛？代码非常简单，给div设置为inline-bl

问题说明

最近遇到了奇怪问题，让我仔细的去了解了vertical-align的基线baseline对齐代码如下: css

div{
   display: inline-block;
   border: 1px solid red;
   width: 100px;
   height: 100px;
 }

html

<div></div>
<div></div>
<div></div>

代码非常简单，给div设置为inline-block,设置了宽高。让其显示在一行，效果正常运行结果如下：

下面问题来了，给第一个div添加内容：“哈哈哈” 运行结果如下：

再给第二个div添加内容:"哈哈哈" 运行结果如下：

再给第三个div添加内容:"哈哈哈" 运行结果如下：

根据以上的内容，我们发现，三个DIV全无内容，与三个DIV都有内容，显示都是正常的，为什么这个，原因，就是vertical-align的值baseline

div{
   display: inline-block;
   border: 1px solid red;
   width: 100px;
   height: 100px;
   vertical-align:bottom;
}

默认vertical-align的值为baseline,给它改为bottom对齐即可

vertical-align是用来设置行内元素对齐方式的。说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素

基线的位置并不是固定的：

在文本之类内联元素中，基线是字符x的下边缘位置
在像img元素中基线就是下边缘。
在inline-block元素中，也分两种情况
1. 如果该元素中有内联元素，基线就是最后一行内联元素的基线。
2. 如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的底边缘

上面的三个Div,当第一个DIV里添加文件后，第一个DIV的基线就变成了"哈哈哈"文字的下边缘，第二个DIV没有文字，他的下边缘就是margin的底边缘，因没有margin,那就相当于底部边框。下面做个测试给div添加一个margin-bottom:50px，运行结果如下：

即下边缘就是margin的底边缘。终于，弄清楚了，不知道大家懂了没

如果大家喜欢，欢迎关注【bug收集】公众号或网站：bug收集