文章首发于我的博客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
值。