CSS之行内元素排列之间的缝隙问题及解决方案

发布时间：2022-08-10 文章分类：编程知识投稿人：王小丽字号：默认 | 大 | 超大打印

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7     <title>Document</title>
 8     <style>
 9       * {
10         margin: 0;
11         padding: 0;
12       }
13       #wrap {
14         background-color: pink;
15         width: 500px;
16         height: 400px;
17         text-align: center;
18         line-height: 400px;
19       }
20       span {
21         background-color: cornflowerblue;
22       }
23     </style>
24   </head>
25   <body>
26     <div id="wrap">
27       <span>A</span>
28       <span>B</span>
29     </div>
30   </body>
31 </html>

运行结果如图所示：

在代码中，我们用*去除了margin和padding，还是能够看到span元素之间有一个空格，A和B并没有紧挨在一起

原因：这是因为我们书写代码的时候，在两个span标签之间输入了换行符（回车键）

怎么解决呢？

解决方案如下：

方案一：书写不换行

<div id="wrap">
      <span>A</span> <span>B</span>
    </div>

缺点：可阅读性大打折扣

方案二：给父标签设置一个属性：font-size：0

<style>
    #wrap {
        font-size: 0;
    }
</style>

缺点：除此以外，还需要给每一个子节点设置字体大小

方案三：利用float解决

<style>
    span {
        float: left;
    }
</style>

缺点：css的布局有可能会因此而改变，需要重新布局

方案四：给父节点设置属性 word-spacing: -4px;

<style>
    #wrap {
        word-spacing: -4px;
    }
</style>

缺点：根据字体的大小，word-spacing 的值应该相应的调整，可能存在兼容性问题

方案五：给父节点设置margin-left: -4px;

<style>
    #wrap {
        word-spacing: -4px;
    }
</style>

缺点：相比于方案四，这种兼容性较好一点

标签 css, 解决方案, 问题