你问我答(34)——破解缝隙之谜
今天收到一位读者的问题，比较有趣，这里介绍给其他读者分享。首先这位读者在前几天的留言中问了这样一个问题：
“您好! 请问，将图片放于Div标签中时,底部与右部都会出现间隙，请问如何去除？”
这个问题问得很笼统，我也很难具体帮助他，因此只能给出一些指导性的原则，因此我这样回答了他：
“这个需要具体调试，看一看这个间隙到底什么原因造成的。关于调试，可以参考一下这篇文章:
http://learning.artech.cn/20080129.css-debug-skills.html ”
我猜想，这位朋友很认真地看了这篇文章，做出了努力，然后给我回信如下：
“感谢您的回复，经过您的指点，发现了问题的所在，但是问题依然没有解决。询问几个老师，都无法解决（已经ff，及ie测试）。闻前沿工作室的老师对此造诣颇深，烦请赐教！！！现附代码及效果图如下：”
代码：
1 2 3 4 5 | <body>
<div style="border:1px solid #FF0000;">
<img src="images/logo1.jpg">
</div>
</body> |
效果：
可以明显地看到图片和下边框之间出现了一条缝隙。而右侧的缝隙我想这位读者不应该有什么疑问，因为div是个块级元素，自然会有右伸展到右端，我觉得这个不是读者要问的问题。而这个关键的问题是底下的这条缝隙到底是怎么产生的呢？以及如何去掉这个缝隙呢？
下面我来解答一下这个问题。
首先要说说的是，这位读者是一个很善于学习的读者，从第一次提的问题，到第二次提的问题，可以发现，第一次的问题，别人很难了解他遇到的到底是什么问题，而第二次的问题，他做了三件事：
1：简化代码，暴露问题，得到了一段出现问题的最简代码，2：给出了这段非常简单的代码，3：给出了问题的效果图。
这样我们就可以一眼知道问题是什么了。这样对于提问者来说，就非常容易得到别人的帮助，比如你到某个论坛去发帖寻求帮助，如果做到了上面这三点，别人就很容易能帮上你，而如果仅仅是一句话的描述，或者是把非常大的一段代码贴上去，别人就很难帮上你了。具体“提问的艺术”请参考：http://talking.artech.cn/thread-178-1-1.html 。
下面具体说一说这个缝隙到底是怎么来的。
第一步：摸底
假设现在我们遇到这个现象，不知道是什么原因，首先用各种浏览器都看一看，分别效果如何。也就是先摸摸底。当我们使用 Firefox 、IE 6 、IE 7 、IE 8 观察以后，可以发现，这个缝隙在IE 6和IE 7中都是存在的，而在Firefox和IE 8中去不存在，看来IE 8还是不错的。
btw，关于如何方便地使用多种IE浏览器查看一个网页，可以参见：《CSS调试工具推荐 —— IE Tester》
这里有一个经验之谈，如果在IE6和IE7中的效果不一样，而IE7和Firefox中效果相同，通常是IE6的bug，而如果IE6和IE7中的相同，而与Firefox不同，通常是他们对CSS标准的解释不同。
OK，读到这里，如果您以前没有遇到过这个问题，不妨先停下来，自己试试看，能不能快速地找到这个缝隙的产生原因。如果5分钟内搞定，可以认为自己的CSS基础知识过关啦~~~
第二步：尝试
此前我也没有遇到过这个问题，所以这里就要来点头脑风暴了，就像初中证明平面几何题，有时候是要靠点运气和灵感的。就好像在证明几何题中添加“辅助线”往往是最关键的一步，这里我们可以试试看在图片后面加几个字母，就相当于添加一条辅助线，看看效果如何。
看了上图，这下子就有线索了，请读者仔细看一下，一共六个字母，左右各三个，你发现各自的特点了吗？——右边的三个的下端都带有一个“钩”，而左边的三个没有。到这里我们已经明显地感觉到问题很可能和它旁边的文字有关，因为这个缝隙的高度和这个“钩”的高度很一致。辅助线起作用了！
第三步：联想
我们这时联想一下文字和图像相关的内容，自然可以联想到“图片与文字的对齐方式”这个问题了，如果读者手边有“HTML+CSS网页设计与布局从入门到精通”这本书，翻到150页，第11.5节“图片与文字的对齐方式”，第2小节：“纵向对齐方式”，那么就一切真相大白了。这一小节讲的是：图像与它旁边文本之间的纵向对向方式由 vertical-align 属性控制，默认值为 baseline 方式，即“基线”对齐。
什么是基线呢？就是上面图中abc这三个字母的底端所在的水平线，英文26个字母，绝大部分都是没有“钩”的，他们的下端都是对齐于基线的，而默认下情况，图像与它旁边的文字也是基线对齐的，也就是说，你可以把这幅图像想象成一个字母，那么这个缝隙就存在了。
而在Firefox和IE 8种，为什么没有这条缝隙呢？是因为他们在对于只有图像，而旁边没有字母的时候，做了不同的处理。如果你用IE8查看一下加了字母以后效果，可以看到同样出现了这个缝隙。
第四步：解决
到这里，我们就可以非常容易地把这个缝隙去掉了： 给图片增加一个CSS设置，使图像与文字的底端，而不是基线对齐就可以了。
1 2 3 4 5 | <body>
<div style="border:1px solid #FF0000;">
<img src="images/logo1.jpg" style="vertical-align:text-bottom">
</div>
</body> |
第五步：总结
到这里，问题就解决了。从这个问题，我们可以总结几点。
1：要善于调试，善于从蛛丝马迹中寻找问题的本质原因。
2：调试的最重要的手段就是“简化代码、暴露问题”，要隔离出一段出现问题的最小代码集，这样寻找问题的解决方法就会容易得的。
3：要善于联想，尝试添加一些“辅助线”，帮你找到问题的关键。
4：基础知识要扎实，如果你根本就不知道有 vertical-align这样一回事，那么再怎么联系也没有用的。
5：书上的东西都是原理，真正如何灵活地运用到工作中，还需要靠不断地积累经验。
5,263
Hold 鈥榚m coming鈥?you all do these a wonderful position at this kind of Concepts鈥?cannot tell you how significantly I, for one particular appreciate all you do!
受益匪浅，不仅学到了知识还学到了解决问题的方法，虽然离开校园多年，还是说一声谢谢老师的教诲。
此例中vertical-align:text-bottom完全可以解决问题，但是我试了一下，如果文字标签用了sub的话，还是有缝隙因为sub中的内容比正常文字的“钩”还要靠下，所以在这种情况下用vertical-align:bottom 才能彻底消除缝隙。
Bruce，
你说的对，任何方法都是针对特定的问题的，具体问题还是需要具体分析。
谢谢您的鼓励！欢迎常来这里交楼！
我试验过，根本不起作用！！
你好，
在我给出的这个例子中，用这个方法是有效的，对于其他的例子可能有其他的因素，这个方法不起作用是有可能的。
CSS的兼容性是个很复杂，也很麻烦的事情，需要具体问题具体分析，不存在任何万能的方法的。
遇到问题，关键的是要搞清楚产生问题的本质原因，只有真正搞懂了原因，才可以找到解决方法。
老师真厉害,厉害,我真佩服,从07年底的时候就开始关注这个网站,真是让我受益非浅啊,书我也买了,正在学习当中
magiczc ，
哈，你是老读者啦：）欢迎常来交流！谢谢你的支持！
ie6是很麻烦,还真没用过vertical-align呢，学习了。
123 ，
IE 6是设计师的噩梦，希望早一天让IE 6退出这个世界。
欢迎常来这里交流！
我一般碰到 这类的 ，都是不换行，连着写 。。
实在想完全兼容，最终极的方法就是。。。img 绝对定位。。呵呵 。。。
我经常这么做。。
鹤庭逸，
道理都是一样的，CSS这个东西很多问题也没必要太深究，能解决问题即可。
这个网站真不错！
luzl ，
谢谢您的鼓励，欢迎常来这里交流！
如果 img 的父元素时候块元素的话，解决的方法很多（有的其他留言者提到），比如：
1）img 设 display:block；
2）img 的父元素设 font-size:0；
3）改变排版，即联着写；
4）img 设 vertical-align:top|bottom|text-top|text-bottom 都可以。
但如果 img 的父元素是内联元素的话，情况就不太一样了，有兴趣的朋友自己动手玩玩咯。。。
青色 ,
总之IE 6就是个大麻烦，web设计和开发者的噩梦。希望早日结束。
＜div style=＂border:1px solid #FF0000;＂＞＜img src=＂images/logo1.jpg＂＞＜／div＞
这样前后连起来也不会出现细缝的。。。但不知道这样写是不是规范的。。
没有什么问题 但是要是图文混排就没有办法避免 了！
将 图片 img 转化为 块级元素即：
也可以处理类似问题，但不如 vertical-align:text-bottom 理解的透彻，凡事只要找到根本的原因，就很容易处理。
另，想咨询一下，如果将 CSS 也模块化，建立一个类似 default.css 的文件，预定义所有默认样式，处理所有种类浏览器在 css 解释上的问题（如 ul 具体是左填充还是左边界等）是否可行？谢谢。
哈哈，忘了， html 被过滤了，上面 即后面是 style=“display:block;” 这句。
有意思，还真没用过vertical-align。
还有，像before，after这些伪对象，好像没什么机会接触。