span与span之间多了一点空白间隔，是什么原因引起的？有什么解决办法？

CSS空白处理

最新推荐文章于 2023-05-16 15:04:24 发布

原创最新推荐文章于 2023-05-16 15:04:24 发布 · 4.4k 阅读

11 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

20 篇文章

订阅专栏

本文探讨了CSS中元素间空白字符的处理方式及解决方法，包括调整布局、移除空格、应用Flex布局等技术手段。

<style>
    .wrap>span {
      background: red;
    }
</style>
<div class="wrap">
  <span>hello</span>
  <span>world</span>
</div>

运行结果：在这里插入图片描述

产生空白的原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器转换成一个空白字符，这个字符的大小受font-size影响

上面代码中的span可以明显地看到有间隔，解这几种决办法： 
1.去掉换行，将 span 写成一行

2.<span>hello</span><span>world</span> 

3.父元素使用 flex 布局：
.wrap {display: flex; flex-direction: row;} 

4.父元素设置 font-size: 0;，span 子元素再设置字体大小 
font-size: 16px; 

5.span 子元素设置 float: left