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>

Answer 1

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.