解决CSS中<li>之间的空白间隔问题
有时候，我们需要将<li>横向排列，而又为了能设置其宽度和高度，为其设置display:inline-block，相邻<li>之间会出现8px的空白间隔，不是margin也不是padding。
<html><he...
有时候，我们需要将<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。
- 发表于 2020-07-06 17:41
- 阅读 ( 747 )
- 分类：web前端开发
