Why inline and inline-block have different height with the same text content

Question

In the below code:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<span class="d-inline" style="border: 1px red solid; padding: 3px 0"><span>asbbb</span></span>
  <span class="d-inline-block ml-2" style="border: 1px blue solid; padding: 3px 0;"><span>inline-block</span></span>
<div>
  
<br/>
  <span class="d-inline badge" style="border: 1px red solid"><span>asbbb</span></span>
  <span class="d-inline-block badge ml-2" style="border: 1px blue solid"><span>inline-block</span></span>
</div>

I created two lines to show the height difference between inline and inline-block in the same line.

The first line shows inline-block is a little bit higher than inline sibling.

In the second line, I added bootstrap class badge to both, and it shows inline element is a bit higher than its inline-block sibling.

For both lines, I can see from the DevTools that the inner span has the same height, but they end up having different height with their parent container.

I wonder how the height of the two display types are calculated?

Answer 1

This is related to how line-height works and how the height of each element is calculated.

Let's start with a trivial example to highlight the effect of line-height

span {
  border:1px solid red;
  padding:5px;
  line-height:50px;
}

<span>some text</span> <span style="display:inline-block">some text</span>

Note how in the second case the height is getting bigger but not in the first case.

On a block container element whose content is composed of inline-level elements, line-height specifies the minimal height of line boxes within the element.^ref

The above apply to the inline-block element and it's clear that line-height will increase the height. To be more accurate, the height of the inline-block is the sum of its line boxes height and in your case we have only one defined with the line-height value.

On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

The above apply to the inline element where the line-height won't increase the height but will only increase the height of the line box where it belong

span {
  border:1px solid red;
  padding:5px;
}

<div style="border:1px solid blue;">
<span>some text</span>
</div>
<br>
<div style="border:1px solid blue;">
<span style="line-height:100px;">some text</span>
</div>

---

To identify the height of an inline element, it's a bit tricky because it depends on the font properties and is covered in another part of the specification:

The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.) ^ref

---

Considering this we can identify the height of each one.

For the first line:

1. the inline-block is inherting line-height:1.5 and font-size:1rem so we will get a line-box height equal to 1.5x1rem = 1.5x16px = 24px. we add the padding/border to get the 32px
2. the inline element is getting a content height for the font equal to 21px¹ and adding padding/border we get 29px

For the second line the .badge will apply font-size: 75%;line-height: 1; so

1. the inline-block will get 1x1remx0.75 = 0.75x16px = 12px and with border/padding we get 20px

2. the inline element will logically have 75% of the previous content area so 0.75x21px = 15.75px and with border/padding we get 23.75px ~ 24px

---

¹In order to identify how the content area is calculated you need to see how the font is designed and find some complex metrics.

below some a related questions that can help you:

What determines the space between the highest and lowest letter and the top and bottom border of the element the letter's in?

How can I calculate the size of font when using different font-types?

---

Another related question around height calculation: How to determine height of content-box of a block and inline element

Answer 2

Rule 1: you cannot set height and width for display: inline; elements.

Rule 2: the line-height property does not work for display: inline-block; elements, It rather get's applied to it's child elements.

In your 1st case:
The line-height: 1.5 property which is set on your body affects both of your span elements.
For the inline span even though the line-height is applied your element's height wont change due to rule 1 above.
For the inline-block span it dosen't get applied to it, rather it is applied to its child element which is in your case another span element due to rule 2. Since the line-height gets applied to it's child element the height increases & because it's parent is an inline-block element the height is applied to it and thats why you see a little raise in the height.

In your 2nd case:
The bootstrap badge class already contains a line-height: 1 property which overides your body's line-height: 1.5 property.
For the inline span nothing affects because of the rule 1.
For the inline-block span however, instead of the body's line-height: 1.5 the badge class line-height: 1 gets applied to it's inner span element and therefore you see it's height smaller compared to the first case.

Note: Although inline elements don't respect height & width, they do respect elements left & right padding property.

Answer 3

The major difference between inline and inline-block is that the latter allows to set a width and height on the element. Also, with display: inline, top and bottom margins & paddings are not respected, and with display: inline-block they are. The differe

display: inline

span.box {
  display: inline;  /* the default for span */
  width: 100px;
  height: 160px;
  padding: 18px;
  border: 3px dashed red;
}

<p>Lorem, ipsum dolor sit amet <span class="box">Inline!</span> consectetur adipisicing elit. Qui,<span class="box">Inline again!</span> itaque sit incidunt totam harum ratione nulla. Labore quis eligendi aperiam laborum harum. Perferendis, laborum unde.
  Tenetur eveniet praesentium corporis perspiciatis?</p>

display: inline-block

span.box {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 18px;
  border: 3px dashed red;
}

<p>Lorem, ipsum dolor sit amet <span class="box">Inline-block!</span> consectetur adipisicing elit. Qui,<span class="box">Inline-block again!</span> itaque sit incidunt totam harum ratione nulla. Labore quis eligendi aperiam laborum harum. Perferendis, laborum unde.
  Tenetur eveniet praesentium corporis perspiciatis?</p>

Notice that how the height and width of inline-block are preserved.