Q:

In CSS, how is the "height" computed for block element?

Below is an example

div > span {
  font-size: 10em;
}
div {
  line-height: 1.2em;
}

/* Normalize the default font size */
body {
  font-size: 16px; 
}
<div>
  <span>Cat</span>
</div>

When I inspected the height of div element in Chrome or Safari, its computed value of height is 66px. 
However, the 66px looks a magic number for me, as I have no idea how this value is computed. I searched for this topic on Google but didn't find a good document which can explain the computation clearly.
Does anyone have ideas about this? 

A:

Setting a line height with a CSS unit (em or px, etc) means that the line height is computed (in this case, the line height becomes 19.2px) and then the computed value will inherit to the span. The span will therefore also have a line height of 19 (rounded) pixels rather than the 192 pixels you expect.
Solution: set the line height without a CSS unit. If you write line-height:1.2 the inherited value of the line height will be what you want.

div > span {
  font-size: 10em;
}
div {
  line-height: 1.2;
}

/* Normalize the default font size */
body {
  font-size: 16px; 
}
<div>
  <span>Cat</span>
</div>

As for an explanation why the div itself doesn't become the same height (19px), this is because of the descender of the large text, which takes up space below the baseline. In your case, this is apparently 52px (it might be different for different fonts) causing the div to grow down. 

