淺談CSS中的<li>之間的空白間隔問題

淺談CSS中的<li>之間的空白間隔問題

問題:

有時候,我們需要將<li>橫向排列,而又為了能設定其寬度和高度,為其設定display:inline-block,相鄰<li>之間會出現8px的空白間隔,不是margin也不是padding。

<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
li {
width:100px;
height:100px;
display:inline-block;
list-style:none;
}
#li1 {
background:red;
}
#li2 {
background:blue;
}
#li3 {
background:yellow;
}
#li4 {
background:black;
}
</style>
</head>
<body>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
</ul>
</body>
</html>

原因:

瀏覽器會把inline元素間的空白字元(空格、換行、Tab等)渲染成一個空格。而為了美觀。我們通常是一個<li>放在一行,這導致<li>換行後產生換行字元,它變成一個空格,佔用了一個字元的寬度。

解決:

方法一:為<li>設定float:
left。不足:有些容器是不能設定浮動,如左右切換的焦點圖等。

方法二:將所有<li>寫在同一行。不足:程式碼不美觀。

方法三:將<ul>內的字元尺寸直接設為0,即font-size:
0。不足:<ul>中的其他字元尺寸也被設為0,需要額外重新設定其他字元尺寸,且在Safari瀏覽器依然會出現空白間隔。

方法四:消除<ul>的字元間隔letter-spacing: -8px,而這也設定了<li>內的字元間隔,因此需要將<li>內的字元間隔設為預設letter-spacing: normal。