css标签之间引发空隙问题解决办法

首先看这段空隙对应的源代码如下

<ul>
        <li><img src="images/1.jpg" alt=""/></li>
        <li><img src="images/2.jpg" alt=""/></li>
        <li><img src="images/3.jpg" alt=""/></li>
        <li><img src="images/4.jpg" alt=""/></li>
        <li><img src="images/5.jpg" alt=""/></li>
</ul>

 

代码看起来没有任何问题，那么问题真的来了：

 

空隙去哪里了啊？

 

问题原因：

 

图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。 

 

解决方案：

 

将图片display: block

 

设置img为“display:block;”。在本例中添加一组CSS代码：“img {display:block;}”。比较常用的做法。

 

设置图片的对齐方式

 

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决

 

设置图片的父级对象文字大小为0px

 

“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

 

设置图片的浮动

 

即在本例中增加一行CSS代码：“#sub img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

 

各种做法自行考量，我偏向于设置浮动或块显示，有些人偏向于使用vertical-align进行解决。

 

您可能感兴趣的文章：
css标签之间引发空隙问题解决办法
图片之间的缝隙解决方法
html5 frameset标签的替代方案是什么？frameset标签替代的解决办法
CSS滑动门技术教程
css中去除inline-block元素间间距多种方法分享
移动端H5开发遇到的问题及解决方法
CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)
Div CSS标准网页布局容易出现的问题汇总
html5 ruby标签的定义及使用方法详解（内有实例介绍）
IE6下溢出多余文字解决方案Iebug