I'm trying to understand the basics of CSS and I ran into a problem where I have a nav element with 3 div elements inside of it. The div elements are displayed as inline-block so all elements are aligned in the nav element.

The problem occurs when I add a paragraph element inside the first div. Suddenly, the first div is not aligned to the other two. I used Chrome's developer tools to look at what happened. The div with the p element doesn't have any margins or paddings. The paragraph tag has, by default, 16px margin, but when I set it to 0, the container div still isn't aligned, so I don't think that's the problem. 

Could someone explain what is causing the first div to move from its original position when I add a child element like p?

The height of p is smaller than the height of the containing div. The margin of p doesn't seem to matter because I set it to 0 and the div still isn't aligned. 

JsFiddle: <http://jsfiddle.net/jjF7R/>

HTML

```
<nav>
 <div>
   <p>hi</p>
 </div>

 <div>
 </div>

 <div>
 </div>
</nav>

```

CSS

```
nav{
width:330px;
height:50px;
border:1px solid black;
display:inline-block;
}

div{
width:100px;
border:1px solid blue;
height:100%;
display:inline-block;
} 

```