title: Why does adding a border change the position of my nav bar?
body: <p>See this CodePen: <a href="http://codepen.io/anon/pen/KypbC" rel="nofollow">http://codepen.io/anon/pen/KypbC</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;One&lt;/li&gt;
                  &lt;li&gt;Two&lt;/li&gt;
                  &lt;li&gt;Three&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      font-family: "Helvetica Neue";
  }
  nav {
      height: 50px;
      background-color: #EEE;
  /*  border: 1px solid #DDD;
  */}
  nav ul li {
      display: inline;
      padding: 20px;
      line-height: 50px;
  }
  .nav-inverse {
      background-color: black;
      color: lightGray;
  }
  </code></pre>
  
  <p>I know it has something to do with the <code>line-height</code> property, but don't understand how it works.</p>
  
  <p>Edit: I've read through the documentation of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" rel="nofollow"><code>line-height</code></a>, but don't understand it.</p>
  
  <ul>
  <li>What is a "line box"?</li>
  <li>What makes an inline element "replaced" vs. "not replaced"?
  ...</li>
  </ul>