1

I'd like to know the reason why it aligns differently when there is text or any other element inside the div with display: inline-block? I know vertical-align fixes it, but I am curious to know how the browser determines to display like that. 

  div {
    width: 100px;
    height: 100px;
    background: #dd6b4d;
    display: inline-block;
/*     vertical-align: top; */
  }
  
  .inner {
    width: 50px;
    height: 50px;
    background: green;
  }
  
<html>
<body>
  <div></div>
  <div>aaa</div>
  <div>
    <div class="inner"></div>
  </div>
</body>
</html>

enter image description here

Jonna
  • 1,625
  • 1
  • 18
  • 38

1 Answers1

0

The default value of vertical-align (if you declare nothing), is baseline

Unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block.

For reference, here is the article on CSS-Tricks

Hiren Vaghasiya
  • 5,454
  • 1
  • 11
  • 25
  • `When there is no text in the inline-block, then it has no baseline` --> this is false, there is always a baseline, and in the case of an empty inline-block element it's the bottom edge of the element – Temani Afif Apr 19 '19 at 08:28