关于DIV布局中图片留白的个人见解

可能接触HTML多了的人都会遇到类似问题，当一个div（或者ul或者li）包含一张图片的时候，这张图片底部会有一部分的留白。很多人就感到很困惑。毕竟我们并没有设它的margin值或padding值呀！为什么它就会有这么一个留白呢？

在网上搜了一下，国内的网友解释不多，对图片留白的解释也含糊不清，大致只提供了一些解决方案却不去跟人家解释具体的原因。这对于真正需要学习这门技术的人来说是没有好处的，于是我在这里就厚着脸皮吹吹水，毕竟我也只是小菜一颗而已。

首先，要解决这个问题，我们还是要弄清楚图片留白的根本原因。搞不懂它怎么回事，即便解决了也只是别人的东西。而我支持的，是理解万岁。

这里，我的解释是：img标签可是个行内替换元素啊亲。什么是替换元素？去查权威指南。什么是行内元素？去查权威指南。

正因为图片是行内元素。所以，无论这图片它有多大。即便它比页面上所有的块状元素都大得多（事实上它再大也会比它的父容器小，除非它脱离文档流了），浏览器也只会当它是行内元素处理。这样一来，我们不妨把它当作一行文字处理，如何？（事实上，我是把它当作一个span来理解的）。当你把它当作一行文字理解的话，也许整个情况就不一样了。我们知道，文字有一个叫做em框的东西。也许你没有听过，不要紧。em框在CSS权威指南里的解释是：当没有为文字设置额外边距时（line-height），em框指示的是字体与基线的距离。而事实上，我们如果没有指定line-height的时候，字体与基线的距离还取决于你选用的字体。部分字体可能会让文本超出em框。因此，大部分的情况是，文字的底部和baseline（基线）是很少重合的。

通过上面的分析，我初步怀疑，图片的留白是否就是图片和基线的距离呢？其实我觉得挺好证明的。只要用一个DIV包含一个IMG，然后改变DIV的line-height、font-size等可以影响文本与基线距离的因素，再看看图片的留白大小是否有改变，那就一目了然了。

这里提一提解决方案吧，其实网上一搜一大把，但是我想说，理解了原理其实解决方案自然就来了。这里说几个我比较推荐的方法：

1.设置display为block，最容易理解的。既然它行内元素有baseline的东西，把它变成块状不就没那么纠结了么？

2.设置浮动，既然你浮动起来了，也就没你什么事儿了。

3.设置父对象的font-size属性为0，这个推荐在父容器对象下只有图片的情况下使用，否则其它文字就会看不到咯，当然你也可以不厌其烦地去设置它的子对象的font-size值。

其实方式还有很多，但是以上三种是我推荐的，因为以上三种都是从原理上来解决问题的。而网上的一些网友的一些方法，例如：设置父对象的overflow为hidden，或者设置垂直对齐方式什么的，在我看来都是一些“hack”的方法，治标不治本，不推荐使用。

好了，说了那么多，纯属个人见解。如果哪里有错误，请各位朋友指出。非常欢迎！

最新解答：

图片的留白，根本原因在于对于行内元素，浏览器默认其vertical-align属性为baseline，也就是说把它显示再父元素的基线上，但是对于一个完整的行段，行高并不等于内容区高度，所以图片有上下有留白是很正常的现象。（很不容易找回这篇文章，为自己以前的懵懂无知埋单）