两个行内块元素同行显示时，会出现3px空白间隙，如何解决？

Anana13

于 2020-07-22 11:15:05 发布

阅读量720

点赞数 1

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.csdn.net/Anana13/article/details/107508226

本文探讨了CSS中行内块元素间距问题，并提供了两种有效解决方案：一是通过设置父元素font-size为0并重新设定子元素字体大小；二是将行内块元素写在同一行。这两种方法都能有效消除元素间的间距，适用于网页布局调整。

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

先上代码看问题

<div class="father">
  <span class="son1">哈哈哈哈哈</span>
  <span class="son2">哦哦哦哦哦</span>
</div>

 .son1 {
   background-color: #bfa;
   display: inline-block;
 }
 .son2 {
   background-color: pink;
   display: inline-block;
 }

在这里插入图片描述

解决方法1

父元素设置：font-size: 0;
子元素重新设置字体大小：font-size: 16px;

.father {
 font-size: 0;
}
.son1 {
  font-size: 16px;
  display: inline-block;
  background-color: #bfa;
}
.son2 {
  font-size: 16px;
  display: inline-block;
  background-color: pink;
}

问题解决：
在这里插入图片描述

解决方法2

直接将两个行内块写在一行上

<div class="father">
  <span class="son1">哈哈哈哈哈</span><span class="son2">哦哦哦哦哦</span>
</div>

这样问题也可解决