CSS: Why adjacent block elements shifting based on child elements

Question

.super {
  writing-mode: horizontal-tb;
  width: 800px;
  height: 800px;
  border: 1px solid red;
}

.parent {
  border: 2px solid #0074d9;
  color: #0074d9;
  display: inline-block;
  width: 200px;
  height: 200px;
}

.element {
  border: 1px dotted #000;
  background-color: #eee;
  color: #000;
  display: inline-block;
  right: 0px;
  bottom: 0px;
}

<div class="super">
  <div class="parent">
    <div class="element">Child1</div>
    <div class="element">Child2</div>
    <div class="element">Child3</div>
    <div class="element">Child4</div>
    <div class="element">Child5</div>
  </div>
  <div class="parent">
    <div class="element">Child1</div>
  </div>
  <div class="parent">
    <div class="element">Child1</div>
  </div>
  <div class="parent">
    <div class="element">Child1</div>
  </div>
  <div class="parent">
    <div class="element">Child1</div>
  </div>
</div>

In the above code, i'm trying to place some inline-block elements together with some existing child elements inside. However, there is some behaviour happening that i'm not able to understand.

The second and subsequent parent elements are shifting vertically below 1 row depending upon the child element size. Can someone explain why this is happening?

Answer 1

This happens because of the vertical-align property that's used to set the vertical alignment of inline, inline-block, and table-cell elements.

To fix your issue you can simply add vertical-align: top on your .parent class.

.super {
  writing-mode: horizontal-tb;
  width: 800px;
  height: 800px;
  border: 1px solid red;
}

.parent {
  border: 2px solid #0074d9;
  color: #0074d9;
  display: inline-block;
  width: 200px;
  height: 200px;
  vertical-align: top;
}

.element {
  border: 1px dotted #000;
  background-color: #eee;
  color: #000;
  display: inline-block;
  right: 0px;
  bottom: 0px;
}

<div class="super">
  <div class="parent">
    <div class="element">Child1</div>
    <div class="element">Child2</div>
    <div class="element">Child3</div>
    <div class="element">Child4</div>
    <div class="element">Child5</div>
  </div>
  <div class="parent">
    <div class="element">Child1</div>
  </div>
  <div class="parent">
    <div class="element">Child1</div>
  </div>
  <div class="parent">
    <div class="element">Child1</div>
  </div>
  <div class="parent">
    <div class="element">Child1</div>
  </div>
</div>