我有一个像这样的nogap.html:
.iblock {
display: inline-block;
width: 200px;
height: 50px;
border: 1px solid blue;
}
.fblock {
display: block;
width: 200px;
height: 50px;
border: 1px solid red;
}
<div class="iblock">AA</div><div class="iblock">BB</div>
<div class="fblock"></div>
它显示得很好(Chrome 76):
但是,如果我从上面的html源文件中删除了文本AA和BB,则在两行框之间会出现间隙,如下所示。为什么?以及如何消除这个怪异的差距?
好吧,我明白了,这是由于所有vertical-align: baseline
>的默认值<div
导致的。注入字母“ q”可以说明这一点。
我推断: