介绍
这篇文章将为大家详细讲解有关删除内联或内联块元素之间间隙的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
删除内联或内联块元素间间隙的方法有:去掉元素标签间的空格,使用负边距,在父元素上设置字体大小为零,省略结束标签。
在页面布局时,我们经常会使用到内联元素,inline-block元素,但无可避免都会遇到一个问题,那就是这些元素之间存在间隙(如下图),会导致一些布局上的问题,那么如何删除这些元素之间的间隙?下面我们就来介绍几种方法(以内联元素为例),希望对大家有所帮助。【相关视频教程推荐:HTML教程,CSS教程】
& lt; div类=癲emo"比;
& lt; span>我是一个跨度。;/span>
& lt; span>我是一个跨度。;/span>
& lt; span>我是一个跨度。;/span>
& lt; span>我是一个跨度。;/span>
& lt; span>我是一个跨度。;/span>
& lt;/div> .demo {
宽度:450 px;
身高:200 px;
保证金:10 px汽车;
字体大小:20 px;
}
.demo跨度{
背景:# ddd;
} 效果图:
<强>
元素间的间隙出现的原因是元素标签之间的空格(浏览器会将HTML中的换行符和空格解析为内容),把空格去掉间隙自然就会消失。去掉元素标签间空格有以下几种方法:
<强>方法一:
& lt; div类=癲emo"比;
& lt; span>我是一个跨度。;/span> & lt; span>我是一个跨度。;/span> & lt; span>我是一个跨度。;/span> & lt; span>我是一个跨度。;/span> & lt; span>我是一个跨度。;/span>
& lt;/div> <强>方法二:
& lt; div类=癲emo"比;
& lt; span>我是一个跨度。
& lt;/span> & lt; span>我是一个跨度。
& lt;/span> & lt; span>我是一个跨度。
& lt;/span> & lt; span>我是一个跨度。
& lt;/span> & lt; span>我是一个跨度。;/span>
& lt;/div> <强>方法三:使用HTML注释标签& lt; !——,——在
使用HTML注释标签& lt; !——,——在把元素间的空格注释掉,让浏览器不在解析空格。
& lt; div类=癲emo"比;
& lt; span>我是一个跨度。;/span> & lt; !—
——祝辞& lt; span>我是一个跨度。;/span> & lt; !—
——祝辞& lt; span>我是一个跨度。;/span> & lt; !—
——祝辞& lt; span>我是一个跨度。;/span> & lt; !—
——祝辞& lt; span>我是一个跨度。;/span>
& lt;/div> 效果图:
<强>
可以使用设置边距(保证金)属性为负值来将元素移回原位,需要根据父级的字体大小进行负值的调整。
跨度{
margin-left: 6 px;
} 注:这在旧的IE(6和7)中是有问题的。
<强>
空格是一个字符空间,因此将字体大小设置为零也会使空间的大小为零。但是,为了显示其他元素,需要将子元素的字体大小设置回所需的大小。
.demo {
宽度:400 px;
身高:200 px;
字体大小:0;
}
.demo跨度{
背景:# ddd;
字体大小:20 px;
} <强>
在HTML5中可以省略结束标签,进而删除标签间的空格。但为了兼容IE6/IE7,可以添加最后一个元素的结束标签。
& lt; div类=癲emo"比;
& lt; span>我是一个跨度。
& lt; span>我是一个跨度。
& lt; span>我是一个跨度。
& lt; span>我是一个跨度。
& lt; span>我是一个跨度。;/span>
& lt;/div> 关于删除内联或内联块元素之间间隙的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
