☁️第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这个单位有两种用法:
- 定义字体大小时以父级的字体大小为基准;
- 定义长度单位时以当前字体大小为基准。
一般来说一个空格的大小为字体大小的0.4,所以可以使用0.4em
刚好为一个空格的宽度。