vertical-align和line-heigh搞基那些事儿

文章首发于个人博客tc9011's notes

原由

项目中在应用Angular/Material的card组件的时候遇到以下问题：

它的代码大概是这样的：

<ul>
  <li>
    <md-card>
      <img md-card-image src="X.png" alt="img">
      <md-card-title>汤诚汤诚汤诚汤诚</md-card-title>
      <md-card-subtitle>汤诚汤诚汤诚汤诚</md-card-subtitle>
      <button>查看详情</button>
    </md-card>
  </li>
  <li>
    <md-card>
      <img md-card-image src="X.png" alt="img">
      <md-card-title>汤诚汤诚汤诚汤诚</md-card-title>
      <md-card-subtitle>汤诚汤诚汤诚汤诚</md-card-subtitle>
      <button>查看详情</button>
    </md-card>
  </li>
  <li>
    <md-card>
      <img md-card-image src="X.png" alt="img">
      <md-card-title>汤诚汤诚汤诚汤诚</md-card-title>
      <md-card-subtitle>汤诚汤诚汤诚汤诚</md-card-subtitle>
      <button>查看详情</button>
    </md-card>
  </li>
  <li>
    <md-card>
      <img md-card-image src="X.png" alt="img">
      <md-card-title>汤诚汤诚汤诚汤诚</md-card-title>
      <md-card-subtitle>汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚汤诚</md-card-subtitle>
      <button>查看详情</button>
    </md-card>
  </li>
  <li>
    <md-card>
      <img md-card-image src="X.png" alt="img">
      <md-card-title>汤诚汤诚汤诚汤诚</md-card-title>
      <md-card-subtitle>汤诚汤诚汤诚汤诚</md-card-subtitle>
      <button>查看详情</button>
    </md-card>
  </li>
</ul>复制代码

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，最后一个元素好像很执拗，一动不动，这就让我很尴尬。

缘由

参考张鑫旭的CSS深刻理解vertical-align和line-height的基友关系。

vertical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘（参见“字母’x’在CSS世界中的角色和故事”一文）。而文字高度是由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上vertical-align的解释，并结合张鑫旭那篇文章给出的图理解：

• middle：元素中线与父元素的小写x中线对齐。

• top：元素及其后代的顶端与整行的顶端对齐。

• bottom：元素及其后代的底端与整行的底端对齐。

还有一篇老外的文章写得也蛮好的Deep dive CSS: font metrics, line-height and vertical-align

相似问题的解决方案

• 将图片转换为块级对象

图片默认是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值。

参考文章

1. CSS深刻理解vertical-align和line-height的基友关系
2. vertical-align
3. li和img标签之间空隙解决办法
4. Deep dive CSS: font metrics, line-height and vertical-align