Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css标签之间引发空隙问题解决办法

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

发布时间:2020-05-08   编辑:www.jquerycn.cn
jquery中文网为您提供css标签之间引发空隙问题解决办法等资源,欢迎您收藏本站,我们将为您提供最新的css标签之间引发空隙问题解决办法资源
css标签之间引发空隙问题主要是发现图片与图片之间了,这个问题其实小编觉得很好解决,但是搞了很久没搞定折腾了许久找到了解决办法,各位来看看吧。
今天在debug代码的时候,遇到一个css问题。注意看出现了一些空隙。以前遇到此类问题,我一般做法都是直接加display:block进行解决,今天深入分析一下原因。

 

 

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

<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进行解决。

 

您可能感兴趣的文章:
js文件中文乱码怎么办?解决方法
手机浏览器图片自适应高度问题解决办法
帝国CMS phome_ecms_' doesn't exist.问题如何解决?
php提示”Cannot send session cache limiter
MySQL数据库之锁的详解
seo优化之企业网站标题怎么定位
php实现html标签自动补全的代码
SEO优化中关于站内优化的技巧
IE6 a标签点击切换图片的问题分析
jquery html动态生成select标签出问题的解决方法

[关闭]