0

I am confused when calculating the height of a block element which contains an inline-block element, and the code is below:

<div style="background: orange;">
    <div style="display: inline-block;"></div>
</div>
<div style="background: green;">
    <div style="background: #d9d9d9; display: inline-block; font-size: 48px; line-height: 12px;">H</div>
</div>

and you can find example here.

My question is why the height of the parent element is 20px under chrome? I think it should be 0 due to its child has no height.
And in the second example, how to calculate the parent height when the child line-height is less than font-size?

1 Answers1

0

Blocks containing inline-block elements (even empty ones) receive height equal to the its calculated line-height. Set font-size to 0 and line-height to 1.

jsFiddle

Stas Bichenko
  • 13,013
  • 8
  • 45
  • 83
  • Works with `font-size` too. – Andy Jan 29 '14 at 07:33
  • Edited the answer. `Font-size` should be set to `0` as well, right. – Stas Bichenko Jan 29 '14 at 07:34
  • the default font-size is 16px in chrome, and the default line-height is normal, so the parent div's height = 16 * normal? –  Jan 29 '14 at 07:49
  • And I added line-height in the child of the first example, but the height of parent is still 20px. –  Jan 29 '14 at 07:52
  • @exizt sorry for forgetting @ you –  Jan 29 '14 at 08:02
  • @odin `line-height` should be set for the PARENT element. The height of line (and, therefore, height of the block containing the line) is equal to its `font-size` or `line-height` (whichever is larger). – Stas Bichenko Jan 29 '14 at 08:37