html - Element with "display: inline-flex" has a strange top margin

Question

I have two div elements, both with the CSS property display: inline-flex, as I would like to position them beside each other. At first, the div's appear to be positioned properly.

.userImg{
  height: 3em;
  width: 3em;
  background: red;
  display: inline-flex;
}

.nameOfUser{
  display: inline-flex;
  height: 3em; 
  width: 10em; 
  background: blue;
}

<div class = "userImg"></div>
                    
<div class = "nameOfUser"></div>

Answer 1

With display: inline-flex you are dealing with inline-level elements.

This activates the vertical-align property, which applies only to inline-level and table-cell elements (source).

The initial value of vertical-align is baseline. This means that inline-level elements position themselves vertically to achieve baseline (text) alignment.

baseline

The baseline is the line upon which most letters sit and below which descenders extend.

^{Source: Wikipedia.org}

This is your current code structure, with the text you added:

.userImg {
  display: inline-flex;
  height: 3em;
  width: 3em;
  background: red;
}

.nameOfUser {
  display: inline-flex;
  height: 3em;
  width: 10em;
  background: aqua;
}

<div class="userImg"></div>
<div class="nameOfUser">
  <h3>Jaxon Crosmas</h3>
</div>