MarksCode MarksCode - 4 months ago 5
HTML Question

Inline-block Div rises when content inserted

I have a main wrapper div with some inline-block content divs within. For some reason when my bottom right content div is empty it is in a lowered position, then when I add a button and input element to it it rises to the correct position I want it in. This behavior is really puzzling to me, I've recreated it here: https://jsfiddle.net/ywbyLdcn/3/, just remove the content of the inner div of 'outer4' div and see it lower.

I have a feeling this is happening because one of the elements (button) inserted has padding on it, but I'm not sure:

button {
margin-right: 5px;
padding: 5px 10px 5px 10px;
}


Can anyone please help me figure out why this is happening? Note I actually want it in the raised position, when it's empty it is out of line.

Answer

One quick solution to this is to add the following rule:

#wrap div {
  vertical-align: top;
}

This selects all div within your #wrap and makes them align to the top, instead of the default "baseline". Read more about vertical-align, here and here.

Fiddle

Comments