做网页的人，有时候会碰到这样的问题，图片与容器之间有个空白死活无法去掉，而且明明没有任何的字符，也没有设置margin/padding等等，这是为神马呢？

迄今为止我碰到过两种情况会导致这种问题：

  1. DOCTYPE为在HTML4或者XHTML1.0（过渡）
    在IE浏览器中会发生，原因是图片后面有”空格”，这里的空格并非指&nbsp，而是就是普通的空格，也就是说图片标签的结束没有紧紧地贴住容器的结束标签。
  2. DOCTYPE为HTML5
    在所有浏览器都一样，图片与容器间有几个像素的空白。

通常这种问题有几种解决方法：

  1. 设置容器的font-size:0
  2. 设置容器的高度然后来个overflow:hidden
  3. 设置图片的display:block
  4. 设置图片的float:left
  5. 设置图片的vertical-align: middle（貌似top/bottom之类的也可）

以上几种方法中，本人最常用的是4、5两种，但是更推荐用”5. 设置图片的vertical-align”，因为目前看来还没有什么后遗症，相对稳定些吧。