在页面布局中，我们经常使用内联元素和内联块元素，但是不可避免的会遇到一个问题，就是这些元素之间存在间隙(如下图所示)，会导致一些布局问题，那么如何删除这些元素之间的间隙呢？下面介绍几种方法(以inline元素为例)，希望对大家有帮助。[推荐视频教程：HTML教程，CSS教程]

divclass='demo '

Span我是span。/span

Span我是span。/span

Span我是span。/span

Span我是span。/span

Span我是span。/span

/div。演示{

宽度width:450px

height:200px

margin:10pxauto

font-size :20 px；

}。demospan{

背景# ddd

}

效果图：

2.jpg

删除元素标签之间的空格

元素之间的间隙是由元素标签之间的空间造成的(浏览器会将HTML中的换行符和空格解析成内容。)，去掉空间，缝隙自然消失。有几种方法可以删除元素标记之间的空格：

方法1:

divclass='demo '

Span我是span。/spanspan我是span。/spanspan我是span。/spanspan我是span。/spanspan我是span。/span

/div

方法2:

divclass='demo '

Span我是span。

/spanspan我是span。

/spanspan我是span。

/spanspan我是span。

/spanspan我是span。/span

/div

方法三：使用HTML标注标签！-

使用HTML注释标签！- .

divclass='demo '

Span我是span。/span！-

- span我是span。/span！-

- span我是span。/span！-

- span我是span。/span！-

- span我是span。/span

/div

效果图：

3.jpg

使用负边距

您可以通过将margin属性设置为负值来将元素移回其原始位置，这需要根据父元素的字体大小进行调整。

span{

边距-left :-6px；

}

注意：这在旧的IE(6和7)中是有问题的。

在父元素上设置font-size :0；

空格是字符空格，所以将字体大小设置为零也会使空格的大小为零。但是，为了显示其他元素，您需要将子元素的字体大小设置回所需的大小。演示{

宽度width:400px

height:200px

font-size :0；

}。demospan{

背景# ddd

font-size :20 px；

}

省略结束标记

在HTML5中，可以省略结束标签，然后删除标签之间的空格。但是为了与IE6/IE7兼容，可以添加最后一个元素的结束标记。

divclass='demo '

Span我是span。

Span我是span。

Span我是span。

Span我是span。

Span我是span。/span

/div

本文转载自中文网站