<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