我们在使用inline-block是时候,可能会出现一个问题,就是元素之间出现间隙。
我们看看代码:
<style>
li {
display:inline-block;
width:px;
height:px;
background-color:red;
}
ul {
width:px;
background-color:blue;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
效果如下:
可以看到,各个红色方块之间出现莫名其妙的间隙,如果我们把html代码改动如下:
会发现间隔就没有了:
这说明间隙其实就是我们输入代码是换行的回车,但是我们不可能将所有代码都写成一行,所以我们可以通过设置font-size:0来解决:
li {
display:inline-block;
width:px;
height:px;
background-color:red;
}
ul {
width:px;
background-color:blue;
font-size:;//关键
}