On 2/10/2013 11:06 AM, Kyle Sessions wrote:
I've come across some really strange behavior when trying to mix multiple
font-sizes within a single block element. I've built an example page here:
http://kage23.com/line-height.html
Basically, it seems like I'm getting an extra pixel of height and I can't
track down how or why. In my example, the paragraph inside of the first
block is 24px tall, as one would expect from a line of text with
line-height of 24px and no margins or padding.
This is not true. The <p> in the first box is 20px tall. This is since a
font size of 16px gives a space of roughly 19.5px (rounds to 20px) for
ascenders and descenders.
However, the paragraph
inside of the second block is 25px tall, even though it has a line-height
of 24px.
Correct but it not due to the line-height. The extra 1px is due to the
font-size difference. A font size of 20px gives a space of roughly
24.375 (rounds to 25px) for ascenders and descenders.
The span has a font-size of 20px, so it should still fit within
the line-height.
The line-height will only cause a new line to be positioned on top of
the first line if the line wraps.
(In fact, as I was playing with it, I was still seeing the
same issue, in some cases even more pronounced, when I made the span a
smaller font-size than the rest of the paragraph.)
This only seems to happen when I mess with varying font-sizes within the
same BLOCK-LEVEL element. If, for example, I assign { display: block; } to
.block p span, then the span becomes 24px tall, and the p becomes 48px
tall, as I would expect. So when my span is inline, why does changing the
font-size on the span affect the line-height of the p???
The line-height is on the outer <div="block"> and this value is
inherited by the <p> and the <span>. The line-height is not effected by
the font-size. The line-height is 24px for <div="block">, <p> and the
<span>. Don't confused the CSS property line-height with the visual and
computed height.
I've been banging my head against this for a while now. I would greatly
appreciate any thoughts or suggestions!
~Kyle
Eric and Philippe have show some demos. The test case below may also
help. Change the first test to 0 line-height and the select "show span"
on the first test. In firefox, narrow the viewport so the Oo overlaps
the Xx. Have a play around with the various test.
http://css-class.com/test/css/text/linebox-line-height-011.html
[Please note that the values above is due to my default font for my browser]
Alan
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
