如何解决inline-block空白问题如何解决inline-block空白问题。可以看到每个孩子之间都会有一个空白。i

<style>

.sub {

  background: hotpink;

  display: inline-block;

}

</style>

<body>

  <div class="super">

    <div class="sub">

      孩子

    </div>

    <div class="sub">

      孩子

    </div>

    <div class="sub">

      孩子

    </div>

  </div>

</body>

可以看到每个孩子之间都会有一个空白。inline-block元素间有空格或是换行，因此产生了间隙。

解决办法：

(1) 删除html中的空白」：不要让元素之间换行：

<div class="super">

  <div class="sub">

    孩子

  </div><div class="sub">

    孩子

  </div><div class="sub">

    孩子

  </div>

</div>

「(2) 设置负的边距」：你可以用负边距来补齐空白。但你需要调整font-size，因为空白的宽度与这个属性有关系。例如下面这个例子：

.sub {

  background: hotpink;

  display: inline-block;

  font-size:16px;

  margin-left: -0.4em;

}

「(3) 给父级设置font-size: 0」：不管空白多大，由于空白跟font-size的关系，设置这个属性即可把空白的宽度设置为0。但是如果你的子级有字的话，也得单独给子级设置字体大小。