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="viewp ...
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>
缺點：相比於方案四，這種相容性較好一點
