当前位置：首页 > news >正文

span与span之间的空白如何解决？

news 来源：原创 2025/5/16 21:07:22

<!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>

效果如下所示、存在空白：

主要原因：

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器转换成一个空白字符，这个字符的大小受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;
        }

最后效果：