解决img标签上下出现间隙的方法

Posted 2020-10-03 蚂蚁Zz

图片与父元素下边缘有 2px 的间隙，并不是因为空格。多个 inline-block 元素之间的间隙才是因为空格。

 

任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。----《CSS权威指南》

如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙

1.第一种解决方案
既然是 inline 元素才会发生这个问题，那我们自然可以简单粗暴的解决这个问题，那就是给我们的元素“变个性”，让它从 inline 变为 block 不就可以了么？

2.第二种解决方案
这也太粗暴了，变了性别，回头还怎么愉快的玩耍呀，所以我们要尝试曲线救活，我们可以去修改一下它的垂直对齐方式呀，这样是不是就可以了呢？
vertical-align 的默认属性就是 baseline ，我们只要设置了跟 baseline 不一样的属性，都可以避免这个问题。
baseline 默认
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length
% 使用"line-height"属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承vertical-align属性的值

3.第三种解决方案
使用浮动，float
浮动虽好，可不要贪杯哟

4.第四种解决方案
父元素字体大小设成0
font-size: 0;