div使用display:inline-block之间的小缝隙

<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>

然后缝隙就没有了，就没有了，就没有了！！！！

原来第一种写法是有个空格符，汗！

转载于:https://my.oschina.net/wefatory/blog/619315