span与span之间的空白怎样解决？
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div{
background: yellow;
}
span:first-of-type{
background: red;
}
span:last-of-type{
background: blue;
}
</style>
</head>
<body>
<div>
<span>文本1</span>
<span>文本2</span>
</div>
</body>
</html> 结果如下所示、存在空白：
https://i-blog.csdnimg.cn/direct/c8aa15097c0541c9a489d4177ff8fe48.png
主要原因：
元素被当成行内元素排版的时间，元素之间的空白符（空格、回车换行等）都会被浏览器转换成一个空白字符，这个字符的大小受font-size影响
解决方法1：
不写换行、紧凑编写
<span>文本1</span><span>文本2</span>
解决方法2：
将 span 的父元素的字体大小设置为 0，这样 span 之间的空格也会消散。然后需要在 span 元素上重新设置字体大小为你想要的值。
div{
background: yellow;
font-size: 0px;
}
span:first-of-type{
background: red;
font-size: 20px;
}
span:last-of-type{
background: blue;
font-size: 20px;
} 解决方法3：
将父元素设置为 display: flex;，使子元素（span）紧密排列 ，可以消除子元素之间的空白。
div{
background: yellow;
display: flex;
} 解决方法4：
[*]将span元素设置为浮动（如float: left;），这样可以使它们紧密排列。但使用浮动布局时需要注意清除浮动，以避免对后续元素产生影响。
div{
background: yellow;
}
div::after
{
clear:both;
content:"";
display: block;
}
span:first-of-type{
background: red;
float: left;
}
span:last-of-type{
background: blue;
float: left;
}
末了结果：
https://i-blog.csdnimg.cn/direct/8c71ae8c65e7443a93cc5ec12b5aedf8.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]