最近遇到过关于<img>标签显示一张图片在一个<div>里面,<div>的宽高由image撑起。可是在图片的底部和<div>底部之间,多出神秘的 2~3px 的空白。如下图:

have white space
我知道<img>是个特殊的元素,为什么会出现这种现象?

Reason

<img> 元素在默认情况下是 inline 元素,inline 元素默认和父级元素的 baseline 对齐的,而 baseline 又和父级底边有一定距离,注意下面两段文字。

Look at this line of text. Notice there are no letters that breach the baseline

另一段:

By just crossing the bridge he probably got away.

注意比较上面两段文字中字母y,j,p,g,下图更形象的显示
jQaJx
因为浏览器提供空间低于 inline 元素来适应字体。这就是上面出现的白边。这不是 CSS 的 padding 或 margin,所以开发中不容易发现。

Solution

  • <img>元素设置display:block
  • <img>元素设置vertical-align:bottom或者vertical-align:top
  • <img>元素设置font-size:0; vertical-align:middle;
  • <div>元素设置line-height:0
  • <div>元素设置font-size:0
  • <img>元素设置vertical-align:text-bottom

以上最后一条效果并不好,设置后仍有 1px 的白边,如下图:
1px white space
而正常处理后是没有白边的,如下图:
no white space

Code source

源码与在线演示

References

欢迎补充