HTML图片上下之间的空隙是什么原因

时间:2021-01-17 18:58:43

在这个问题上,《权威指南》该书第三版第 146 页有明确说到:

如果一个垂直元素没有基线——也就是说,这是一个图像或表单输入元素,或者其它替换元素——那么该元素低端与其父元素的基线对齐。这个对齐规则很重要,因为它使得一些 web 浏览器总是把替换元素的底边放在基线上,即使该行中没有其他文本。例如,假设一个表单元格中只有一个图像。这个图像可能实际在基线上,不过在某些浏览器中,基线下面的空间会导致图像下出现一段空白。另外一些浏览器则会把图像“紧包”在表单元格中,所以不会出现空白。根据CSS工作组的意见,这种加空白的行为是正确的,不过大多数创作人员都不喜欢这种做法。

先打预防针:图像属于行内替换元素!

那么我们现在回到问题本身上来,为什么图片上下之间会有缝隙呢?

要了解这个问题,首先就需要了解什么是基线。简单的说,基线就是文本行中字母"x"(小写)的底线,请看下图

HTML图片上下之间的空隙是什么原因

从图中明显看得出来,对于每一行说,基线下面实际上还有一部分高度,要解释这一部分高度,就需要涉及到行内框、行框和行间距等一些概念。
我们长话短说,一行文本不可能就 x 那么高,上面下面总会有些位置留给个头儿大些的文字,当然这只是简单的快捷记忆方法,实际上如果需要具体了解,请参照该书“字体”和“文本属性”章节,这里不作赘述。

上代码:

body{
width: 110px;
}
img {
width: 60px;
height: 60px;
}
<img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76" alt="">
<img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76" alt="">
<img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76" alt="">

HTML图片上下之间的空隙是什么原因

因为图片底部是相对于基线对齐的,所以图片下面还留出一些空间,要解决这个问题,方法很多:

  • 设置图片的 vertical-align: bottom;(将图像底部与行框底部对齐,行框底部就是这一行的最底部)
  • 对图片使用 float(float的定义是元素紧挨元素,所以不会出现缝隙)
  • 指定图片的 display: block; (垂直文本对齐属性 vertical-align 只适用于行内或者替换元素,display改变了元素的显示,实际上并不是只有block才会这样,只要不是带有inline的都不会出现缝隙,这样做的目的就是使图像成为块级元素,这样图像就不会生成行框,也就不会是相对于基线对齐,所以也不会有基线下面的缝隙)(《CSS 权威指南》第三版第203页)
  • 指定父元素 font-size: 0; (实际上font-size并不是你看到的字体大小,而是用于设置字体的em框,它指定了如果没有额外行间距的情况下,字体基线间的距离)
  • 指定父元素 line-height: 0; (line-height 指定了基线之间的最小距离,font-size是指定没有额外行间距时的基线距离,此处的额外行间距就是line-height来指定)