今天来聊聊图片，当然，对于web来说，图片是个大命题，多大呢？要多大有多大~ 这里只谈它是怎么“不听话的”，然后让它乖一点。

   Web的世界里有很多问题，与之对应的基本也有很多情景和对策。那么问题就来了，我们遇到某种情景和找到的对策也都具有偶然性，下面来挑很多人都遇到过的一种情况说说。

   上篇文章我们谈了inline-block的空隙，这篇文依然是聊空隙。通过上篇文，我们可以看出，其实空隙和元素本身并无直接关系，因为它真的就是“空隙”。但是小小的空隙却常给我们带来小小的困惑和麻烦。

   场景：“这是怎么回事啊，我什么都没有给图片设置，为什么这里有个空隙？！然后，margin、padding、border、outline…（七大姑八大姨）全都去掉了，为什么还有？！肿么办呐？！”

   对于以上场景你是否熟悉捏？~颇有病急乱投医，reset掉它全家的意味哈！

   再稍微分两种情况来说（其实没啥区别），一种是img“裸奔”，另一种是被其他元素包裹，比如div或者li等。

   “裸奔”代码如下：

   <div class="img_list">

       <img src="images/xiang01.jpg" alt="">

       <img src="images/xiang02.jpg" alt="">

       <img src="images/xiang03.jpg" alt="">

       <img src="images/xiang04.jpg" alt="">

       <img src="images/xiang05.jpg" alt="">

   </div>

   实现如下：

   聪明如你应该看出端倪了对吧？是的，每张图片的右边如预期般出现了空隙，但事实仅仅如此么？~ 我们把容器缩小看一下 duang~

   原来不只是右边有，下面也有？似曾相识吗？

   方法一：font-size：0；

   是的。“音烂不唠嗑”那家伙好像也是有空隙，那我们用其中一种方法把它消除掉试试，把font-size设置为0；

   呜呼，果然，那这是第一种方法。

   方法二：float

   由于float能让元素脱离正常文档流，可谓有摧毁一切的架势，这里也不意外，使用float就可以使他们消失于无形，如果赶上你制作图文混排文字环绕的效果，那就是一举两得了~

   方法三：vertical-align：XX；

   或许你会有点奇怪，为什么是XX？没错，有些文章中有说设为“top”，有些文章中说用“bottom”，可是在css如此的精彩世界里，你会对这么一个简单的答案满足么？总会多问几个why？然后，you try try 便会发现，，原来设置top|bottom|middle|text-bottom|text-top等都是可以消除掉这个空隙的，但需要注意，往往页面中不是一个图片孤立的存在着，设定不同的值可能会对其他的内容产生不同的影响，这里不细说，具体请各位去了解下vertical-align方面的东东（下面有个张老师的链接）。至于为什么vertical-align有除掉这个空隙的作用呢？

   据不完全考察，图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 vertical-align的某些值可以避免这种情况出现。你可以试一下设置一个具体的负百分比值也行哦~

   方法四：display：block；

   为什么这种方法是可行的呢？其实这个方法跟方法三和方法二有着某种微妙的联系，what？莫急，先来说跟方法三有何联系，方法三里，扯到了baseline，也扯到了vertical-align，但没有扯一扯它在哪些元素上起作用，是的，对于block级的元素，它们是玩儿不了的，也可见张老师牛奶/果冻/坚果，故而，设置为block，它就干掉了空隙。跟方法二的关系是，不知大家是否注意到行级元素在设置float之后，具备了块级元素所具备的功能，比如设置宽高，内外边距等，所以，浮动，效果跟此法类似。 当然，鉴于block之后会改变它本身inline的表现，有些朋友可能会考虑inline-block，but这样是不凑效的，况且，它本身就存在这样的问题。

   方法五：为父容器设置高度

   现在才说起这个看起来平常的方法可不是我不够坦白，因为很多人可能从来没有遇到过图片空隙这样的问题，会觉得这是个挺难遇到的bug，其实不然，没有遇到右边的空隙是因为，只要它不是裸奔，譬如这样：

   <ul class="img_list">

       <li><img src="images/xiang01.jpg" alt=""></li>

       <li><img src="images/xiang02.jpg" alt=""></li>

       <li><img src="images/xiang03.jpg" alt=""></li>

       <li><img src="images/xiang04.jpg" alt=""></li>

       <li><img src="images/xiang05.jpg" alt=""></li>

   </ul>

   img被一个容器包裹起来，这里是li，还可以是别的，那么右边的空隙就没了，因为它是存在于img之间，这里有一层容器将其隔开。当然了，可能还会因为设置了margin值，从视觉上直接忽略了空隙的存在，不在讨论之列哈~ 没有遇到过下面的空隙，可能是无意间使用了能够消除掉它的方法，最平常和自然的就是设置父容器高度了。

   方法六：无缝排列

   这个方法和消除inline-block空隙同理，让它们紧密排列即可，不过同样，从代码的格式上来说不宜采取。

   讨论了这么多，貌似这种现象是img所独有的，是么？聪明如你可能又猜对，no！~ 可能大家都知道html的元素中有一类元素叫做替换元素，什么是替换元素呢，咱拿规范说说事儿吧；以img为例：

   The IMG element embeds an image in the current document at the location of the element’s definition. The IMG element has no content; it is usually replaced inline by the image designated by the src attribute。

   这是规范里对img的描述，简单说来img元素没有内容，它是把来自src属性值的那个图片嵌入页面中。

   说到这里，是不是想起还有不少元素是这样的？比如input、textarea、select等等？

   是的，它们同样存在着缝隙问题，为什么呢，看图

   是否有秒懂的感觉？

   好吧，扯了不少了，里面提到了好几个东东，没有细谈，因为每一个挑出来都够喝一壶的，所以，不细聊了，重点还是帮助有遇到类似问题的朋友找到较合适的解决方法。文中可能有不当之处，还望指教。

建议继续学习：

1. 图片动态局部毛玻璃模糊效果的实现    (阅读：13487)
2. 淘宝图片存储架构    (阅读：9633)
3. 解决IE6从Nginx服务器下载图片不Cache的Bug    (阅读：6954)
4. When we`re only No.2, we try harder之聊天表情设计小探讨    (阅读：6443)
5. 精于图片处理的10款jQuery插件    (阅读：6044)
6. phpThumb:强大的缩微图类    (阅读：5402)
7. js实现预加载图片让图片快速显示    (阅读：4807)
8. 利用开源的Gearman框架构建分布式图片处理平台[原创]    (阅读：4179)
9. 使用数据库存放图片    (阅读：4071)
10. 通过php+imagick 创建PDF图片预览    (阅读：3701)