title: line-height & font-size relationship
body: <p>This is difficult for me to put right but let me try.  </p>
  
  <p>I have horizontal <code>ul li a</code> menu:</p>
  
  <p><strong><em>Please note that I have omitted some CSS that keep it simple</em></strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class='featuring'&gt;&lt;a href='#'&gt;Whatever&lt;/a&gt;&lt;/li&gt;
      &lt;li class='empty-item'&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Item1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;Item2&lt;/a&gt;&lt;/li&gt;
      ...
  &lt;/ul&gt; 
  
  ul li a{
      line-height: 2.4em;
      font-size: 1.1em;
      ...
  }
  ul li.empty-item{
      border-top: 1.7em solid white;
      border-bottom: 1.7em solid white;
      border-left: 1em solid #240B3B;
  }
  </code></pre>
  
  <p>Above code gives this:
  <img src="https://i.stack.imgur.com/hgJzN.jpg" alt="nav-menu"></p>
  
  <p>Which is great except I wanna change that kindle font-size so I add:</p>
  
  <pre><code>ul li.featuring a{
      font-size: 1.4em;
      ...
  }
  </code></pre>
  
  <p>And unwanted distortion appears:</p>
  
  <p><img src="https://i.stack.imgur.com/i3h7j.jpg" alt="nav-menu2"></p>
  
  <p>I suppose that I don't understand line-height property well enough? I though that after changing <code>ul li.featuring a</code> font size container size would stay same and only font size inside target element would change but instead element's height scales while leaving rest of the menu items in same proportion and out of sync.
  What I thought is that line-height(3.4em) and font-size(1.4em) difference(2em) is cut in half and distributed evenly which would mean that no container height would change???</p>
  
  <p>Hope it is clear.</p>
  
  <p>Thank you.</p>