默认情况下几个inline-block元素排列在一起 中间会出现空白的间隙
html: 123</div>
<div>123</div>
<div>123</div>
<div>123</div>
css:
<pre name="code" class="css">div{
display:inline-block;
width:200px;
height:200px;
background:pink;
}
如何解决这个问题:
1.把标签连起来写
<span style="white-space:pre"> </span><div>123</div><div>
123</div><div>
123</div>
或者这样写
<span style="white-space:pre"> </span><div>123</div><div>123</div><div>123</div>
2.使用font-size:0
<span style="white-space:pre"> </span><div class="container">
<div class="test">123</div>
<div class="test">123</div>
<div class="test">123</div>
</div>
.test{
display:inline-block;
width:200px;
height:200px;
background:pink;
font-size:16px;
}
.container{
font-size:0;
-webkit-text-size-adjust:none;
}