Le 2 oct. 2013 à 10:06, Kyle Sessions <[email protected]> a écrit :
> 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. However, the paragraph > inside of the second block is 25px tall, even though it has a line-height > of 24px. The span has a font-size of 20px, so it should still fit within > the line-height. (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 size of the content of your span affects the overall height of the block box(es), no? It is however not changing the overall line-height. What is changing is the physical space needed to place the inline-box, the parent block will then grow to accommodate that. If you measure your test case carefully, you'll notice that the space between the top-border and the top of the characters is different. Line-height will give you the minimum value that will separate two lines of text. It will affect placement of the baseline in the block box and its height; but the various line-boxes will contribute to the overall height (and also affect the baseline placement inside the block box). Below is a slightly modified test case (colours rule !); the span has a font-size of 24px. http://dev.l-c-n.com/_b/kyle.html screen grab taken with Pixie on OS X 10.8.5. http://dev.l-c-n.com/_b/kyle.png The grid you see is 1px by 1px, so you can go counting pixels… (those are magnified screen pixels). I left in the measurement box for the 'p', it shows 17px height, the uppercase 'I' also measures 17px. The lowercase letters measure 12px. The overall height of the cyan box is 28px. Philippe -- Philippe Wittenbergh http://l-c-n.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/
