title: font-size vs line-height vs actual height
body: <p><a href="https://stackoverflow.com/q/25520410/">This</a> question's answer says that the <code>font-size</code> defines the height of a box so that all letters (with ascenders and descenders) can fit.</p>
  <p>But why has a <code>span</code> with 40px <code>font-size</code> and <code>line-height</code> an actual size of 45px? If I understand the linked question correctly then &quot;X&quot; should be smaller than 40px but the overall height should be exactly 40px. I thought that maybe it is making some extra room above/below the ascenders/descenders but the image shows that the ascenders/descenders take all the space so there can't be much extra room:</p>
  <p><a href="https://i.stack.imgur.com/KeJpB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KeJpB.png" alt="enter image description here" /></a></p>
  <p>When I wrap a <code>div</code> (green) around the <code>span</code> then the <code>div</code> has a height of 40px. Why does the <code>div</code> use the <code>font-size</code> of its child for its height but the child itself doesn't?:</p>
  <p><a href="https://i.stack.imgur.com/xMn9P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xMn9P.png" alt="enter image description here" /></a></p>
  <p>Now when I set the <code>span</code>'s <code>line-height</code> to 15px (less than the <code>font-size</code>) then the <code>div</code>'s height changes to 26px. How is this value calculated? Has this something to do with the baseline?:</p>
  <p><a href="https://i.stack.imgur.com/Ztv2K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ztv2K.png" alt="enter image description here" /></a></p>
  <p>When I set the <code>span</code>'s <code>line-height</code> to 65px (more than the <code>font-size</code>) then the <code>div</code>'s height is the height of the <code>line-height</code>. I would have expected the <code>div</code>'s height to be something like (65px - 45px) + 45px.:</p>
  <p><a href="https://i.stack.imgur.com/9yWJm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9yWJm.png" alt="enter image description here" /></a></p>
  <p>So how do <code>font-size</code> and <code>line-height</code> affect the actual heights of elements? I read some questions that referenced the spec but I couldn't make much out of it. Are there any easy to understand rules?</p>
  <p><a href="https://jsfiddle.net/daa1wgL1/" rel="nofollow noreferrer">JSFiddle</a></p>