文章首发于我的博客
起因
项目中在应用Angular/Material的card组件的时候遇到如下问题：
它的代码大概是这样的：
-
汤诚汤诚汤诚汤诚 汤诚汤诚汤诚汤诚 -
汤诚汤诚汤诚汤诚 汤诚汤诚汤诚汤诚 -
汤诚汤诚汤诚汤诚 汤诚汤诚汤诚汤诚 -
汤诚汤诚汤诚汤诚 汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚 -
汤诚汤诚汤诚汤诚 汤诚汤诚汤诚汤诚
ul{ width: 1200px; margin: 0 auto; margin-top: 40px;}li{ display: inline-block; margin-right: 70px; margin-bottom: 60px; &:nth-child(3n){ margin-right: 0; }}复制代码 我一开始以为是li标签之间空隙导致的，于是就按照常规方法，把font-size设置为0，but，最后一个元素好像很固执，一动不动，这就让我很尴尬。
原因
参考张鑫旭的。
默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘（参见“”一文）。而文字高度是由line-height决定的。卡片上面留白行为表现，本质上，就是vertical-align和line-height背地里搞基造成的。这里借用一下张鑫旭文章中的图片可能更好理解一点：
在这里li元素display:inline-block，而在CSS2的可视化格式模型文档中，一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。
可以从下图看出，在li的基线是最后一行文字的基线（查看详情按钮不计入，因为已经脱离文档流了）。而倒数第二个li的文字折行了，最后一个li文字只有一行，但是最后一个li元素要像它的好基友看齐，于是它把自己变矮了（和基友是真爱）。此时也可以说明为什么font-size设置为0，因为我给那段文字手动设置了font-size，按照优先级来说，li的font-size当然不起作用。
知道原因后，我们可以试下把li的line-height设置为0，得到下面的效果：
此时图片下面那两行字的行高就会受到影响，两行文字会叠在一起，这样我需要手动为文字加一个line-height，但是对于我这样的懒人来说，太麻烦了。
此时还有一种方法就是修改vertical-align的值，让li元素的vertical-align变成top/bottom/middle。这时候同样会得到下图的效果，但是卡片里面的文字却还是正常显示，恩，简直完美。
vertical-align的top/bottom/middle这三个值到底是啥东西咧，可以看MDN上的解释，并结合张鑫旭那篇文章给出的图理解：
- middle：元素中线与父元素的小写x中线对齐。
- top：元素及其后代的顶端与整行的顶端对齐。
- bottom：元素及其后代的底端与整行的底端对齐。
还有一篇老外的文章写得也蛮好的
类似问题的解决方案
- 将图片转换为块级对象
图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等（如果布局允许）。
img { display: block }复制代码 - 使用其他vertical-align值
比方说bottom/middle/top都是可以的。
- 直接修改line-height值
只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。
- line-height为相对单位，font-size间接控制
如果line-height是相对单位，例如line-height:1.6或者line-height:160%之类，也可以使用font-size间接控制，比方说来个狠的，font-size设为0, 本质上还是改变line-height值。