有时候,我们需要将<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。