- A+
所属分类：Web前端
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>
缺点：相比于方案四，这种兼容性较好一点
