Drop Cap Leading Problem

I used some CSS to create a drop cap, but it creates extra space between the first and second line. Why?
Here’s the code I’m using:

p{text-indent:10%;text-align:justify;margin:4% 0 5%}
p.fp:first-letter{font-size:200%}

<p class=“fp”>…</p>

Thanks,

Chris

Browsers don’t put leading at the top of for the letter, they split the line height arbitrarily between top and bottom. In other words: the web is NOT print. :confused:

Any how. a solution to your issue can be to set the line height of your drop cap to what it would be if it were regular size text.


p{text-indent:10%;text-align:justify;margin:4% 0 5%}
p.fp:first-letter{font-size:200%; line-height: .5}

hope that helps

That worked great., D.P. Thanks.
I was reading

about untiless line heights. The author says to think of the number after “line-height:” (scaling factor) as a multiplier. That’s what percent is - a multipleir - 88% is 88% of something, 300% is 300% of sometjhing or 3 times something . So it seems to me the easist way to think of the lack of units used/needed for line-height is to think percent and don’t use the percent symbol nor any symbot nor anything for units. What do you think?

Thanks

That’s what percent is - a multipleir - 88% is 88% of something, 300% is 300% of sometjhing or 3 times something . So it seems to me the easist way to think of the lack of units used/needed for line-height is to think percent and don’t use the percent symbol nor any symbot nor anything for units. What do you think?

Yes, basically. Think of line-height as a super-imposed fontsize in ‘ghost’ container

WHEN DEALING WITH FONTS EMs and %s act similarly that is 1em and 100% = 1 x the size of the fontsize of the parent element. line-height also gives you the option to use a unit less value (where 1= 100%) AND to use ABSOLUTE units: PX, PT, IN, etc. On occasion , these can be handy too.

I think that might mean that the designers of CSS have assumed percent for line-height and allow other units to be used. That seems like a good idea for all properties in css.