内联元素间的间隔

最新推荐文章于 2022-12-27 17:49:49 发布

山清水秀iOS

最新推荐文章于 2022-12-27 17:49:49 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/youhong/p/6486033.html

本文介绍了解决HTML内联元素之间出现非margin间隔的问题。通过删除空格或使用注释连接内联元素，以及调整父元素的font-size并单独设置内联元素的font-size，可以有效消除这些间隔。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

内联元素间会出现不是由margin引起的间隔，具体如下描述：

HTML：

<div>
  <span>a</span>
  <span>b</span>
  <span>c</span>
  <span>d</span>
</div>

CSS:

*{margin:0;padding:0;}
span{
  background-color: #ddd;
}

以上代码的结果为：

通过调试，发现各个span间没有margin，也不存在任何其他元素，但却有间隔。

解决方案：

span间的间隔是由span标签间存在空格、tab、换行字符导致（经过实验发现，内联元素、替换元素、inline-block元素均存在此问题），故有如下两种解决方案。

1）删掉空格等字符：既然间隔是空格等导致，删掉或用注释连接。如下：

删掉空格
<div>
  <span>a</span><span>b</span><span>c</span><span>d</span>
</div>
用注释连接
<div>
  <span>a</span><!--
  --><span>b</span><!--
  --><span>c</span><!--
  --><span>d</span>
</div>

2）空格、tab、换行均为字符，故其大小与font-size有关。根据实践发现将父元素div的font-size调大，间隔也会变大。因此，可以通过将div的font-size设为0，即可消除间隔。然而font-size是可继承属性，此时span的font-size也为0，span的内容将无法显示，此时只需单独为span设置font-size即可。

即解决办法为：将父元素font-size设置为0，并为内联元素单独设置font-size。

div{
    font-size:0;
} 
span{
  font-size:20px;
  background-color: #ddd;
}

以上代码的显示结果如下，间隔被消除。

转载于:https://www.cnblogs.com/youhong/p/6486033.html