img下面出现了蜜汁空白

　　这段时间一直在做老师不值得的手机端的网页，在给元素设置宽度的时候都是使用百分比的形式，后来知道，这就是流体布局。不过这些都是后话，下面说的是在做静态手机站的时候遇到的一个问题。

　　因为使用了流体布局，几乎都是最外面的盒子设置为width:100%然后，内部的盒子根据需要，占据最外层盒子的10%~90%不等，最常用的还是设为50%，当将多层的宽度设置好之后，最内层的盒子填充span，img等标签，写进去文字，或者放置图片，于是最内层的盒子会根据图片的宽度占据盒子的大小，高度等比缩放，因而通过img的高度获得了最内层盒子的高度，然后一级一级向上，最后整个最外层的盒子被内层的元素的高度给撑了起来。

　　就在这时发现了一个奇怪的现象：如下图

　　

　　讲道理，盛放图片的盒子的height是由它里面盛放的元素的height决定的，途中是在一个div中放了一张img，所以div的高度，应该是由img的高度决定，但是，在几乎每个盛放img的盒子的高度，都会比img本身高度高处一小块空间，这使得在用手机浏览网页的时候产生非常违和不美观的效果。可是又突然发现，在盛放多个banner图片的盒子中，没有出现上述的情况，研究了半天，发现盛放多个banner图的盒子比其他盛放单张图片的盒子中多了个：

font-size:0；

　　那么我为何要在盛放多个banner图的盒子上添加font-size:0呢。

　　这是因为，在写代码的时候，多个img标签之间有换行符，但是浏览器会将这些换行符解析为一个空白字符，于是banner图与图之间产生了一小段空隙。

　　上述问题的解决办法有很多，比如可以将img标签的换行符去掉，就是将img标签写在一行内。或者是将换行符注释掉，但是我选择了一个比较奇葩的做法，就是讲font-size设为0。

　　话题转回来，难道图片下方出现的空白区域也是因为有换行或者是多余的空格被解析成了空白字符么。经过一番代码测试，不是这样的。

　　那么为什么盛放img的盒子高度会大于图片本身高度呢，

　　原来，问题出现在这里：

　　

　　解决办法是啥呢？

　　

 

 　　（完）

转载于:https://www.cnblogs.com/slk-fight/p/6625031.html