前言：我比較用喜歡行內元素，行內塊元素來做橫向導航，這樣就不用再去擔心浮動塊級元素帶來的不必要影響。但行內元素，行內塊元素元素有個硬傷--有默認的間隙
一、行內標籤元素出現問題
<body>
<style>
span { background:red; }
</style>
<span>行內元素</span>
<span>行內元素</span>
<span>行內元素</span>
</body>
頁面顯示結果
這時就會發現出現，標籤之間出現了間隙。
二、行內塊標籤元素出現問題
行內塊標籤元素出現的比較多的是在表單元素了。
<body>
<style>
button { background:red; border:none; }
</style>
<button>行內塊元素</button>
<button>行內塊元素</button>
<button>行內塊元素</button>
</body>
頁面顯示結果
同樣的，行內塊標籤之間也出現了間隙。
三、解決方案
會出現間隙的原因，其實是行內標籤元素，行內塊元素之間的換行帶來的影響。只要解決了換行的問題，也就解決了間隙的問題。
①、方案一
<body>
<body>
<style>
span { background:red; }
</style>
<span>行內元素</span><span>行內元素</span><span>行內元素</span>
</body>
頁面顯示結果
這個時候就沒有間隙了。
②、方案二
<body>
<style>
span { background:red; }
</style>
<span>行內元素</span
><span>行內元素</span
><span>行內元素</span>
</body>
頁面顯示結果
③、方案三
<body>
<style>
span { background:red; }
</style>
<span>
行內元素</span><span>
行內元素</span><span>
行內元素</span>
</body>
頁面顯示結果
④、方案四
<style>
span { background:red; font-size:16px;}
</style>
<body>
<span>行內元素
<span>行內元素
<span>行內元素
</body>
頁面顯示結果
tip：以上四種方案兼容所有常規瀏覽器。
⑤、方案五（把父級font-size設置爲0）
<style>
body { font-size:0; }
span { background:red; font-size:16px;}
</style>
<body>
<span>行內元素</span>
<span>行內元素</span>
<span>行內元素</span>
</body>
頁面顯示結果
tip：方案四在IE7,及IE7下還是會出現間隙。在safari瀏覽器下也會出現間隙。
行內塊處理方式相同
---------------------
作者：穆弘
來源：CSDN
原文：https://blog.csdn.net/w390058785/article/details/80097061
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！