<div class="fff">
<div class="ddd"></div>
<div class="ddd"></div>
<div class="ddd"></div>
<div class="ddd"></div>
</div>
<style>
.fff{
height: 40px;
}
.ddd{
display: inline-block;
height: 40px;
width: 40px;
background-color: #f0f;
}
</style>
以上是常用的一个html代码,浏览器预览如下图:
每个div之间会有缝隙,百思不得其解,这个缝隙到底是什么。。。到底是怎么产生的。
后来的解决办法如下:
<div class="fff">
<div class="ddd"></div>
<div class="ddd"></div>
<div class="ddd"></div>
<div class="ddd"></div>
</div>
<style>
.fff{
height: 40px;
display: inline-block;/*ddd的float属性触发了BFC,所以添加这个属性*/
}
.ddd{
height: 40px;
width: 40px;
background-color: #f0f;
float: left;
}
</style>
然后那个div与div之间的缝隙到底怎么产生的问题,为了赶需求也没有深究。
然而,有一次写html手滑,写成了类似下面这个样子:
<div class="fff">
<div class="ddd"></div><div class="ddd"></div><div class="ddd"></div><div class="ddd"></div>
</div>
<style>
.fff{
height: 40px;
}
.ddd{
display: inline-block;
height: 40px;
width: 40px;
background-color: #f0f;
}
</style>
然后缝隙就没有了,就没有了,就没有了!!!!
原来第一种写法是有个空格符,汗!