1

* {
    margin: 0;
    padding: 0;
}
.container {
    position: absolute;
    font-size: 12px;
    font-weight: 400;
    line-height: 0;
}
.child {
    display: inline-block;
    width: 0;
    height: 0;
}
<div class="container">
  <div class="child"></div>
</div>

While the code itself is simple, I'm unsure why the .container element has a height of 4px.

When I change the display style of .child to inline or block, the height of .container becomes 0.

Gerard
  • 15,418
  • 5
  • 30
  • 52
Jianxin Yang
  • 11
  • 1
  • You can find the live example here: https://codepen.io/y1j2x34/pen/KKxpyYE – Jianxin Yang Feb 17 '23 at 10:39
  • It's because inline block elements get a space added underneath them for descenders (like text does) – Pete Feb 17 '23 at 10:53
  • @Pete - For a font-size of 12px, the space under the inline-block element will only be around 2px-3px, only a little more than half of that necessary to account for the 4px container height. Can you account for the remainder? – Alohci Feb 17 '23 at 11:04
  • @Alohci depends on what the line height is set at I guess – Pete Feb 17 '23 at 11:11

0 Answers0