inline-block div being pushed down if a child div is added into it

Question

I have a container here which has three child divs which are inline-block. Now when I add a child like div or paragraph inside child one, the parent div pushes down. I know the solution already. if I use property vertical-align top the problem is fixed. But I am just curious to know what is the reason? jsfiddle here

body{ 
  margin:0
}
#navbar {
  width:100%;
  background-color:black;
  height:50px;
  padding: 0 150px 0 150px;
  position:relitive;
}
#logo {
  height:60px;
  width:90px;
}
#container {
  background-color:#E6E6E6;
  width:78%;
  margin: auto;
  height:1000px;
  text-align:center;
}
#navTable { 
  color:white;
  position:absolute;
  top:10px;
  left:300px;  
  font-size:1.5em;
}
#navTable td {
  padding:0 10px 0 10px;
  border-right:1px solid white;
}
#container>div {
  width:32%;
  height:100%;
  border:1px solid black;
  display:inline-block;

}

.content { 
  background-color:yellow;
  height:300px;
}

<div id='navbar'>
  <img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/>
  <table id='navTable'>
      <tr>   
        <td>Home</td> 
        <td>News</td> 
        <td>Money</td> 
        <td>Entertainment</td> 
        <td>Travel</td>   
      </tr>
  </table>
</div>

<div id='container'>
  <div id='leftDiv'>
    <p>HHHHHH</p>
  </div>

 <div id='middleDiv'></div>
 <div id='rightDiv'></div>
</div>

Johannes · Answer 1 · 2017-09-17T22:57:48.800

The reason is that inline-blocks are vertically aligned along their baseline. If there is text inside an inline-block element, the * last* line of that text will be the baseline. If an inline-block is empty, the baseline is (almost, not completely) at the bottom of the element, (the little offset is the height that would be needed for descenders in letters like g, y, p etc. - which is also the case for the last line of text, BTW).

So the bottom text line in your first inline-block is aligned with the "almost-bottom" of the empty inline-blocks.

To avoid that and align them properly (as you already wrote), you can apply vertical-align: top to all inline-blocks.

`vertical-align: top` solved my problem thanks – Saad Abbasi Dec 06 '20 at 08:41 — Saad Abbasi, Dec 06 '20 at 08:41

ab29007 · Answer 2 · 2017-09-14T04:57:00.280

0

The baseline of the child is the baseline of it's parent, unless set otherwise. the baseline of p here will at the bottom of the #container because of the default vertical-align of inline-block elements. Hence the text starts from the bottom of the container.

edited Sep 14 '17 at 04:57

answered Sep 14 '17 at 04:32

ab29007

7,611
2
17
43

But what about the box wrapping the text? Shouldn't it be align on the base as well? – Hugo Silva Sep 14 '17 at 04:40
which box. the box is `leftDiv` which is inline-positioned – ab29007 Sep 14 '17 at 04:43
yes, it is an inline-block, shouldn't the bottom of that block be at the base of the line? – Hugo Silva Sep 14 '17 at 04:44
I think it improves in terms of explanation but still the answer is as hard to explain as it is to visualize. I tried my best, hope it helps. – ab29007 Sep 14 '17 at 04:58

inline-block div being pushed down if a child div is added into it

2 Answers2