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>

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;
}

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?

Bjorn Pettersen

CodePen

xxeaaEg

...

2 Replies

MarkBoots•8mo ago

they all would line up if there was content, but the first and last div are empty inline elements are lined up to the text baseline, but without text and having a top/bottom margin, the baseline gets disrupted margin-block (top/bottom) on inline elements is asking for issues. they distrupt the content flow, which you typical don't want with inline elements I don't know what you want to achieve, but you could use margin-inline (left/right) on the divs and a padding-block (top/bottom) on the section

thebjornOP•8mo ago

It's mainly for my own understanding. Good catch on the y-margin issue. Changing display: inline to display: inline-flex; align-items: end; is closer to what I was expecting (although I can see why that was wrong).

Gaming

Programming

How are inline-block vertically aligned?