2

I have a nogap.html like this:

 .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>

and it displays well like this(Chrome 76):

enter image description here

But if I remove the text AA and BB from html source file above, there arises a gap between the two lines of boxes, like below. Why? And How to remove that weird gap?

enter image description here

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

Well, I got it, this is due to default value vertical-align: baseline on all <div>s. Injecting a letter 'q' reveals this.

enter image description here

enter image description here

I deduce that:

  • When a inline-block DIV has no text, that DIV's bottom border is considered the baseline, so the problem arises.
  • But if a inline-block DIV has some text, those text's baseline is considered as baseline, so I see the difference.
Jimm Chen
  • 3,411
  • 3
  • 35
  • 59
  • 1
    `vertical-align: top;` to the inline block element – Temani Afif Aug 26 '19 at 13:20
  • 1
    an empty inline-block have a baseline different from an inline-block with content so the alignment will be different – Temani Afif Aug 26 '19 at 13:22
  • as a side note: if you add `overflow: hidden;` to the inline-block element you will have the gap with and without content (the baseline will be the same in both cases and it's the bottom of the element) – Temani Afif Aug 26 '19 at 13:23
  • Hmm, it's a pity that we can not find out who occupies that gap with Chrome 76 or Firefox 67 DevTools element inspector right? just because it is not margin or padding. Hope we can have it some day. – Jimm Chen Aug 26 '19 at 13:29
  • *Hope we can have it some day.* --> I don't think we will have something one day because technically there is no gap and this space is related to font usage. Imagine your write `hello`, you will have a space at the bottom and that space is dedicated to character like `pqjy`. Same thing is happening here. You have a space reserved for your fonts but you may only use some character that will not cover all the space. – Temani Afif Aug 26 '19 at 13:33
  • 1
    @TemaniAfif - The dev tools could provide a way to depict both the vertical location and height of the strut and the top and bottom of each line box, since the "gap" is from the baseline of the strut to the bottom of its containing line box. – Alohci Aug 26 '19 at 14:03
  • @Alohci yes, seen like that it would make sense – Temani Afif Aug 26 '19 at 14:10

0 Answers0