The inline div block will be pushed down if a child div is added to it

Question

I have a container in which there are three child divs that are inline-block. Now, when I add a child as a div or paragraph inside a child, the parent div is discarded. I already know the solution. if I use the vertical-align top property, the problem is fixed. But I'm 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>

Run codeHide result

Answer 1

I found a very useful answer to your question. Please refer to a proven solution similar to your problem in the following link:

Why is this inline block element pressed down?

Answer 2

, . , * last * . , (, ) ( - , descenders , g, y, p ..), , BTW).

, "-" .

( ), vertical-align: top .

Answer 3

The basic level for the child is the parent for him, unless otherwise indicated. the baseline phere will be down #containerdue to the vertical alignment of the default elements of the inline block. Therefore, the text starts from the bottom container.