Why do DIVs height contain images that are overpriced by 4.5px?

This div will have a calculated height of 104.5px (in recent versions of Chrome, FF, and IE).

<div><img src="" height="100px" /></div>

This div will have a calculated height of 100px

<div style="overflow:auto;"><img src="" height="100px" style="float:left;" /></div>

I used FireBug to view DIV and IMG, and both IMGs have 0 for field, padding and border, but the calculated height is somehow greater than 4.5px more in the first instance.

Why is this? This affects me when I try to place a page with a constant vertical grid. Ideally, I would not have to swim imgs.

I tried looking here ==> http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7.2 , and I even tried vspace = 0, but that didn't change anything.

Thank you for your help!

+3
5

, , - -. , .

css reset . , , doctype. doctype , , .

meyer web reset , .

100px, , , , , , .

+2
+1

div, . (, html {line-height:1.5em;})

, , line-height:0 div , img .

http://jsfiddle.net/kq3Yy/

+1

<div style="display:inline" /> .

0

, , . ? ? , , .

0

Source: https://habr.com/ru/post/1733994/


All Articles