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

文章首发于我的博客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当然不起作用。