html - css - inline elements ignoring line-height -


i'm having trouble figuring out why inline elements ignore line-height in browsers (chrome , firefox ignore it, ie9 not).

here example:

<small style="line-height: 1; font-size: 26px;">hello, world</small> 

the expected result element height 26px, however, it's being set 31px. if set element's display block, height correctly set 26px.

everything read says it's supposed set line height, can't figure 1 out. here read on w3c:

the height of each inline-level box in line box calculated. replaced elements, inline-block elements, , inline-table elements, height of margin box; for inline boxes, 'line-height'.

source: http://www.w3.org/tr/css2/visudet.html#line-height

what webkit inspector shows (and measured in photoshop) content area's dimensions.

see http://www.w3.org/tr/css2/visudet.html#inline-non-replaced

the height of content area [of inline elements] should based on font, specification not specify how. ua may, e.g., use em-box or maximum ascender , descender of font...

different browsers use different approach here. see http://jsfiddle.net/ejqtd/1/ illustration of that. note how webkit renders higher content area, line-height still correct.

the content area exceeds line box in case, permitted: http://www.w3.org/tr/css2/visudet.html#leading

if height specified 'line-height' less content height of contained boxes, backgrounds , colors of padding , borders may "bleed" adjoining line boxes.

it's easy see if consider line-heights < 1: http://jsfiddle.net/kkmmk/


Comments

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

media player - Android: mediaplayer went away with unhandled events -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -