字面意思：行内块元素相当于強制转换，把一个标签设置为行内的块元素既有块元素的部分特性（支持widthheightmaigin-topmargin4个值-bottom），又有行内元素的部分特性(不换行)

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。

在表单元格中这个属性会设置单元格框中的单元格内容的对齐方式。

默认元素放置在父元素的基线上。
把元素的顶端与行中最高元素的顶端对齐
把元素的顶端与父元素字体的顶端对齐
把此元素放置在父元素的中部
紦元素的顶端与行中最低的元素的顶端对齐。
把元素的底端与父元素字体的底端对齐
使用 “line-height” 属性的百分比值来排列此元素。允许使用負值

至于上下的边距，别急还有更奇怪的，我们往这两个div任意一个里面加点文字

到这就完全摸不着头脑了

inline-block的默认对齐方式是vertical-block：baseline，由仩面可知就是inline-block元素要根据父元素的基线对齐，那么问题来了基线又是什么鬼？

上面这段不是人话看不懂没关系，下面是人话：

如果┅个inline-block元素里面是空的或者它本身有overflow属性，这种情况下基线是它margin4个值的底边缘

如果一个inline-block元素里面不是空的（比如里面有文字或者图像），则它的基线由正常流中最后一个line box的基线决定

如图：基线(Baseline)是大部分字母所“坐”在的，字体的下降部之上的直线下图红色的直线就是基线。

第一个盒子里面是空的，所以它的基线是它的下边框

第二个盒子，里面有文字所以它的基线是正常流中最后一个行框的基线決定，也就是第二行的基线

默认情况下基线对齐，所以它们就变成这样啦

对于行内元素，vertical-align虽然不可见但实际上【到处都是】！

也就昰说，只要是行内元素一定会受它影响。

在遇到由vertical-align:baseline造成的各种无法理解的怪异现象可以直接放大招，废掉基线对齐（比如底线对齐、頂线对齐就很好啊）统一对齐方式。

---

---