<div>The baseline of the inline-block element depends on the the content it has inside, and the overflow property.<br>
  So, to identify the baseline of the inline-block element:
  <ul aria-label="List of things, the baseline of the inline-block depends">
    <li>It's the baseline of the last content element in the linebox in the normal flow</li>
    <li>If there's an overflow property other than visible, then the baseline is the bottom edge of the <a href="https://drafts.csswg.org/css2/#margin-box">margin-box</a> </li>
    <li>If there's no in-flow content, then the baseline is the bottom edge of the margin-box</li>
  </ul>
  For e.g: see how the baseline of the inline-block content changes when there's a content <span class="box">Text</span>, and when there's no content<span class="box"></span>.Also, see how the baseline goes to the margin-box bottom edge when we set <code>overflow: hidden</code><span class="box overflow">Text</span> on our inline-block element. Try changing the <code>overflow</code> to <code>visible</code> and see what happens. Also try adding some margin to the <code>inline-block</code> and see how it respects the <code>bottom-edge</code> of the <code>margin-box</code> 🤯
</div>
body {
  font-size: 125%;
  font-family: Tahoma;
}
* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  height: 3rem;
  width: 4rem;
  background: tomato;
}

.overflow {
  overflow: hidden;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.