when two empty inline-blocks with different height are placed next to each other, the one with smaller height gets down a bit. why is that?

0

Issue

* {
  margin: 0;
  padding: 0;
}

.parent {
  height: 10rem;
  background-color: blue;
}

.child1 {
  display: inline-block;
  width: 45%;
  height: 7rem;
  background-color: red;
}
    
.child2 {
  display: inline-block;
  width: 45%;
  height: 3rem;
  background-color: red;
}
    
    <div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
    </div>

The smaller inline-block gets down a bit to get aligned with the larger inline-block. I don’t know why this happens. I don’t want it to happen.

(I know that the behaviour changes when some content is added to the empty divs)

jsfiddle-> https://jsfiddle.net/2vzjqreh/

Solution

It’s because of the vertical-align property, it’s default value is ‘baseline’. You can read about it here. I’ve edited your code and just add vertical-align to
.child-1 styles.

* {
  margin: 0;
  padding: 0;
}

.parent {
  height: 10rem;
  background-color: blue;
}

.child1 {
  display: inline-block;
  width: 45%;
  height: 7rem;
  background-color: red;
  vertical-align: top;
}
    
.child2 {
  display: inline-block;
  width: 45%;
  height: 3rem;
  background-color: red;
}
<div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
    </div>

Answered By – Saeed Shamloo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More