Inline DIV with text goes to bottom of parent [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
I have this code:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
The div elements with text in them keep going to the bottom of the parent div. What is the reason for this?

Answer 1

Because for inline elements the default vertical alignment is baseline. Set it to something like top or middle instead:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
vertical-align:top;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>

Answer 2

While I can't fully explain why the div elements with text drop to the bottom, I found that you can solve this by adding the property:
vertical-align: top;
to the .sibling class.

Answer 3

In order to understand why the divs go below, let's talk about the display property you have mentioned for the sibling.
.sibling {
display: inline-block;
}
From the name, we can understand that display:inline-block declaration shows properties of both block and inline level elements. In order words its an inline element who's width and height can be set or it's a block element which doesn't start off from a new line.
In your code, you have mentioned inline-block so they don't occupy a single block rather all div's are displayed on the same line somewhat similar to what happens when you apply float. Here, the div won't occupy the whole line so when we resize the browser, it tries to fits in all the div's which could be fit into that single line.
Hope this makes sense to you.