盒子
盒子
文章目录
  1. Reason
  2. Solution
  3. Code source
  4. References

remove white space below image

最近遇到过关于<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

欢迎补充