Adding text to div moves div downwards

Question

I have the following code, which displays a 7 divs side-by-side, similar to a bar chart.

.wrapper {
  width: 100vw;
  height: 50vw;
  text-align: center;
}

.bar {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: red;
  display: inline-block;
}

<div class="wrapper">
  <div class="bar" style="height: 200px"></div>
  <div class="bar" style="height: 130px"></div>
  <div class="bar" style="height: 180px"></div>
  <div class="bar" style="height: 230px"></div>
  <div class="bar" style="height: 150px"></div>
  <div class="bar" style="height: 160px"></div>
  <div class="bar" style="height: 190px"></div>
</div>

However, when I add some text one of the divs, the entire div moves down.

.wrapper {
  width: 100vw;
  height: 50vw;
  text-align: center;
}

.bar {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: red;
  display: inline-block;
}

<div class="wrapper">
  <div class="bar" style="height: 200px"></div>
  <div class="bar" style="height: 130px"></div>
  <div class="bar" style="height: 180px">some text</div>
  <div class="bar" style="height: 230px"></div>
  <div class="bar" style="height: 150px"></div>
  <div class="bar" style="height: 160px"></div>
  <div class="bar" style="height: 190px"></div>
</div>

How do I stop the div from moving down?

kess · Accepted Answer · 2020-08-28T16:49:40.767

Just set the vertical-align of the bar and the issue should be fixed.

Explanation: The issue happens when the vertical align is set to anything related to the baseline, so: baseline, sup, sub, length and percentage values, and the default value (baseline).

The values that fix this issue are: middle, top, bottom, text-top, text-bottom. You can choose from those, but you most likely only need the first three.

.wrapper {
  width: 100vw;
  height: 50vw;
  text-align: center;
}

.bar {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: red;
  display: inline-block;
  vertical-align: bottom;
}

<div class="wrapper">
  <div class="bar" style="height: 200px"></div>
  <div class="bar" style="height: 130px"></div>
  <div class="bar" style="height: 180px">some text</div>
  <div class="bar" style="height: 230px"></div>
  <div class="bar" style="height: 150px"></div>
  <div class="bar" style="height: 160px"></div>
  <div class="bar" style="height: 190px"></div>
</div>

Adding text to div moves div downwards

1 Answers1