parent div height is incorrect when it contains another empty div with display: inline-block,

Question

I ran into issue where parent div height is larger than the contents and I'm trying to understand why.

Specifically child div has display: inline-block and no contents. padding, margin, border are all 0;

What's interesting that adding any content, even nbsp, fixes the issue.

Is this a browser bug or by design?

why parent div height is larger than child div?
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block'></div>
</div>

<hr>

adding any content fixes sizing
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block'>
    x
  </div>
</div>

& nbsp; works too

<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block'>&nbsp;</div>
</div>

Check the following, scroll down to the results section and check out the differences between ***inline-block*** and ***block*** particularly with your issue in mind... https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_value_comparison — dale landry, Apr 26 '21 at 04:12
@Gildas.Tambo changing to flex or grid doesn't really solve the problem because it changes the behavior and we no more have the baseline alignment issue happening here — Temani Afif, Apr 26 '21 at 11:03

Temani Afif · Accepted Answer · 2021-04-26T11:07:42.267

It's by design and is related to the baseline alignment. To understand what is happening add more text inside your container

why parent div height is larger than child div?
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block'></div>
  p
</div>

<hr>

adding any content fixes sizing
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff'>
    x
  </div>
  p
</div>

& nbsp; works too

<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff'>&nbsp;</div>
  p
</div>

In the 3 cases, the inline-block is aligned with the baseline but the baseline of an empty inline-block element is its bottom edge so you have that bottom space that is for descender.

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge. ^ref

You will also have that issue in the 3 cases if you add oveflow:hidden

why parent div height is larger than child div?
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;overflow:hidden'></div>
  p
</div>

<hr>

adding any content fixes sizing
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff;overflow:hidden'>
    x
  </div>
  p
</div>

& nbsp; works too

<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff;overflow:hidden'>&nbsp;</div>
  p
</div>

To avoid this you simply change the alignment to something different than baseline:

why parent div height is larger than child div?
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;overflow:hidden;vertical-align:top;'></div>
  p
</div>

<hr>

adding any content fixes sizing
<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff;overflow:hidden;vertical-align:top;'>
    x
  </div>
  p
</div>

& nbsp; works too

<div style="background-color:red;">
  <div style='background-color:blue; width:32px; height:32px; display:inline-block;color:#fff;overflow:hidden;vertical-align:top;'>&nbsp;</div>
  p
</div>

Image inside div has extra space below the image

Interesting... is it possible to achieve it without the extra text ? — Gildas.Tambo, Apr 26 '21 at 11:08
@Gildas.Tambo the extra text is irrelevant here (you can remove it). I simply used it to highlight the alignment of the inline-block — Temani Afif, Apr 26 '21 at 11:09

parent div height is incorrect when it contains another empty div with display: inline-block,

1 Answers1