Layout of parent inline-block elements with nested inline-block elements

Question

A small example:

<div class="c">
  <div class="item">
    <div class="wrap">
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
    </div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item {
  width: 100px;
  height: 100px;
  background-color: black;
  display: inline-block;
}

.wrap {
  width: 100px;
  height: 50px;
  background: green;
}

.wrap-item {
  width: 30px;
  height: 30px;
  background: gray;
  display: inline-block;
}

codepen. Please explain why the first element is shifted downwards. I noticed that this is affected by the height of the element, but I can't figure out why this happens. Is this standard behavior or am I doing something wrong? If this is standard behavior, how do I correct it?

Please go read [ask] and [mre], and then edit your question accordingly. The minimal code necessary to reproduce your problem/scenario, belongs _directly_ into your question, do not just send us to some external platform. — CBroe, Jun 16 '23 at 08:36
Your Question is incomplete and The subject line is misleading. Please consider improving your Question's Title and try asking clear questions. https://stackoverflow.com/questions/how-to-ask — Koustav Ray, Jun 16 '23 at 09:18

score 0 · Accepted Answer · answered Jun 16 '23 at 08:52

You are looking for vertical-align. The default value is baseline, meaning it aligns the baseline of your element with its neighbors. The interior content defines the baseline, so the bottom of the gray wrap-items are aligned with the bottom of the other black squares.

We can instead align to the top to bring everything back in line.

.item {
  vertical-align: top
}

.item {
  width: 100px;
  height: 100px;
  background-color: black;
  display: inline-block;
  vertical-align: top;
}

.wrap {
  width: 100px;
  height: 50px;
  background: green;
}

.wrap-item {
  width: 30px;
  height: 30px;
  background: gray;
  display: inline-block;
}

<div class="c">
  <div class="item">
    <div class="wrap">
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
    </div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Layout of parent inline-block elements with nested inline-block elements

1 Answers1