2 replies

How are inline-block vertically aligned?

Given the html

<section>
    <div class="a"></div>
    <div class="b">b</div>
    <div class="c"></div>
</section>

<section>
    <div class="a"></div>
    <div class="b">b</div>
    <div class="c"></div>
</section>

<section>
    <div class="a"></div>
    <div class="b">b</div>
    <div class="c"></div>
</section>

<section>
    <div class="a"></div>
    <div class="b">b</div>
    <div class="c"></div>
</section>

and the css

div {
  width: 2rem;
  aspect-ratio: 1;
  margin: .5rem;
  background-color: rebeccapurple; color: white;
  display: inline-block;
}

div {
  width: 2rem;
  aspect-ratio: 1;
  margin: .5rem;
  background-color: rebeccapurple; color: white;
  display: inline-block;
}

div {
  width: 2rem;
  aspect-ratio: 1;
  margin: .5rem;
  background-color: rebeccapurple; color: white;
  display: inline-block;
}

div {
  width: 2rem;
  aspect-ratio: 1;
  margin: .5rem;
  background-color: rebeccapurple; color: white;
  display: inline-block;
}

I would expect the 3 divs to line up horizontally, yet they do not: https://codepen.io/bjorn-pettersen/pen/xxeaaEg

What am I missing?

...