当我从嵌入式块div中删除textContent时,为什么会出现间隙?

时间:2019-08-26 13:17:48

标签: html css

我有一个像这样的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):

enter image description here

但是,如果我从上面的html源文件中删除了文本AA和BB,则在两行框之间会出现间隙,如下所示。为什么?以及如何消除这个怪异的差距?

enter image description here

=============

好吧,我明白了,这是由于所有vertical-align: baseline>的默认值<div导致的。注入字母“ q”可以说明这一点。

enter image description here


enter image description here

我推断:

  • 当内联块DIV具有文本时,该DIV的底部边框被视为基线,因此出现了问题。
  • 但是如果内联块DIV包含一些文本,则这些文本的基线被视为基线,所以我看到了区别。

0 个答案:

没有答案