行内（内联）元素之间的空隙问题

最新推荐文章于 2023-10-25 20:59:03 发布

zmf19901117

最新推荐文章于 2023-10-25 20:59:03 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏：学习中的小问题文章标签： HTML&CSS

原文链接：https://www.cnblogs.com/jacobb/p/kongxxi.html

学习中的小问题专栏收录该内容

6 篇文章

订阅专栏

本文探讨了HTML中内联元素之间出现的神秘间隙问题，解释了间隙产生的原因，包括换行符、制表符和空格的影响。提供了四种有效解决方案，包括去除空白字符、使用HTML注释替代换行、设置负margin和font-size为0，以及使用word-spacing调整单词间距。文章还提及了浮动元素不会出现此间隙的特点。

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

行内元素之间会有几像素的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。

<div>
    <span>内联元素</span>
    <span>内联元素</span>
    <span>内联元素</span>
    <span>内联元素</span>
    <span>内联元素</span>
</div>

解决方法：

方法一：既然是由于行符、制表符（tab）、空格等字符引起，那么就去掉行内元素之间的行符、制表符（tab）、空格，但这样代码会比较难看

方法二：用HTML注释代替换行

<div>
    <span>内联元素</span><!-- 
     --><span>内联元素</span><!-- 
     --><span>内联元素</span><!-- 
     --><span>内联元素</span><!-- 
     --><span>内联元素</span>
</div>

方法三：设置margin-right为负值，需要考虑上下文的字体和文字大小，不建议这样做

方法四：给内联元素的父级设置font-size：0

div {
    font-size: 0px;
}
span {
    background: pink;
    font-size: 10px;
}

其中IE6 7下始终存在1px的空隙，需要使用word-spacing减少单词间的空白（即字间隔） word-spacing:-1px;

另外，加了浮动内联元素是不会有这个空隙的。