为什么会产生间隙?
由于编写代码时的美观和可读性,在代码中添加回车或空格而产生的间隙。
html代码:
<ul class="container">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
.container li{
display: inline-block;
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
方法一:
调整html代码,缺点降低了可读性,如下
<ul class="container">
<li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li>
</ul>
或者
<ul class="container">
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
方法二:
去掉闭合标签:
<ul class="container">
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
方法三:
font-size:0
.container{
font-size: 0;
-webkit-text-size-adjust:none;
}
.container li{
font-size:12px;
}
方法四:
margin设为负值,*注:margin的值通常为font-size的一本取相反数
.container li{
margin-left:-.5em;
}
方法五:
letter-spacing,跟上一种方式一样,取值为font-size的一半
.container{
letter-spacing: -.5em;
}
方法六:
word-spacing,类似
.container{
word-spacing: -.5em;
}