title: Inline elements and line-height
body: <p>I am confused about <code>line-height</code> in <code>inline</code> elements. I have been searching:</p>
  
  <ul>
  <li><a href="http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced">http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced</a> </li>
  <li><a href="http://www.w3.org/wiki/CSS/Properties/line-height">http://www.w3.org/wiki/CSS/Properties/line-height</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height">https://developer.mozilla.org/en-US/docs/Web/CSS/line-height</a></li>
  </ul>
  
  <p>But I am not sure if I understand. I know that I can make the height exact if I convert to block with display:inline-block. But what I try to understand is how line-height inline elements work. Here are the questions:</p>
  
  <ul>
  <li><p>I have a text <code>font-size: 15px</code> but if I see the developer tools of the browser, it makes <code>18px</code>. Why? The <code>font-size</code> is just aproximate? or it does not measure the ups and downs?</p></li>
  <li><p>Why the background color of the <code>inline</code> element does not have the same <code>height</code> than the <code>line-height</code>? The <code>line-height</code> in <code>inline</code> elements measure the space of the line box, that is the space to the line above and below, but not the <code>inline</code> element itself. Is that the explanation?</p></li>
  </ul>
  
  <p><a href="http://jsfiddle.net/1b2rc1hr/"><strong>Here an example to play with.</strong></a> </p>
  
  <p><strong>CSS:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#block-element {
    font-family: 'verdana', sans-serif;
    font-size: 15px;
    line-height: 15px;
    text-decoration: none;
    color: black;
    margin: 0;
    background-color: grey;
  }
  #inline-element {
    -webkit-box-sizing: border-box;
    font-family: 'verdana', sans-serif;
    font-size: 15px;
    line-height: 15px;
    text-decoration: none;
    color: black;
    margin: 0;
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="block-element"&gt;
    &lt;a id="inline-element" href="#"&gt;
      inline element font-size:15px but height:18px real
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>