niubility-coding-js
niubility-coding-js copied to clipboard
Published
20 hours ago •
LinDaiDai
LinDaiDai
☁️第4期第6题：如何解决inline-block空白问题？
原本的代码为：
<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>
margin-left: -0.4em; 这个值是怎么确定的呢？
em这个单位有两种用法：
- 定义字体大小时以父级的字体大小为基准；
- 定义长度单位时以当前字体大小为基准。
一般来说一个空格的大小为字体大小的0.4，所以可以使用0.4em刚好为一个空格的宽度。