html - Why does line-height add extra height? -

<div><iframe style="height: 100px"></iframe></div> <div style="line-height: 0"><iframe style="height: 100px"></iframe></div> 

http://jsfiddle.net/p6sd4/

if inspect dom can see first div has height of 108px while it's 104px on second one. iframe borders 104px why adding 4 pixels when line-height set?

tested on chrome 28.0.1500.71 mac.

because iframes sit on baseline. div has tall enough contain strut well, drops below baseline, , height determined line-height.

0 line-height = 0px strut height = 0px of strut below baseline.

use iframe { display:block; } or iframe { vertical-align:top; } or iframe { vertical-align:bottom; } stop happening.

(display:block stops line box being created, there no strut. vertical-align:top , vertical-align:bottom free strut sharing line box's baseline iframe, strut placed higher such no part of below bottom of iframe. note if line-height greater iframe height, strut force line-box height , div height still greater iframe height, regardless of vertical-align setting)