Inline DIV with text goes to bottom of parent

Question

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?

score 4 · Accepted Answer · answered Feb 10 '20 at 18:04

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>

score 0 · Answer 2 · edited Feb 10 '20 at 18:31

0

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.

edited Feb 10 '20 at 18:31

Bioukh

1,888
1
16
27

answered Feb 10 '20 at 18:09

Reed Schalo

11
3

score -1 · Answer 3 · answered Feb 10 '20 at 18:45

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.

I understand, although this doesn't explain why they're not on the same line vertically. They have the exact same style applied, the only difference is the text in two of the DIVs. — Gary_Cooper, Feb 10 '20 at 19:15

Inline DIV with text goes to bottom of parent

3 Answers3