vertical-align 属性，你了解嘛？？

问题说明

最近遇到了奇怪问题，让我仔细的去了解了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属性

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的底边缘。

终于，弄清楚了，不知道大家懂了没。