LinDaiDai/niubility-coding-js

☁️第4期第6题：如何解决inline-block空白问题？

Opened this issue · 2 comments

LinDaiDai commented

原本的代码为：

<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。但是如果你的子级有字的话，也得单独给子级设置字体大小。

  • (4) 注释：

    <div class="super">
  <div class="sub">
    孩子
  </div><!--
  --><div class="sub sub2">
    孩子
  </div><!--
  --><div class="sub">
    孩子
  </div>
</div>
lstoryc commented

margin-left: -0.4em; 这个值是怎么确定的呢？

LinDaiDai commented

margin-left: -0.4em; 这个值是怎么确定的呢？

em这个单位有两种用法：

  1. 定义字体大小时以父级的字体大小为基准；
  2. 定义长度单位时以当前字体大小为基准。

一般来说一个空格的大小为字体大小的0.4，所以可以使用0.4em刚好为一个空格的宽度。