> Thanks for your reply. I'm not sure if I reply directly to your email here,
> or not.
Usually you reply to list, so others can chime in.
> Yes I did change that. But if you look at the change now (second blog
> entry), why does it add more spacing above the letter Q,d despite my
> padding: 3px?
My guess is that it's a quirk of the font. That the Q (and probably the O) are
smaller than T, P, R, etc.
> Sorry, when I added line-height 1em, you will note it also introduces
> another problem: the text does not wrap well underneath. It leaves a gap
> below the drop cap. I would prefer the text to flow below the drop cap, if
> possible without such a gap.
Then you'll need to adjust your padding and font-size (and paragraph
line-height) so that the height of the letter is the same as an exact number of
lines of text...
span.drop-cap {
background: #797979;
border: 1px solid #333;
color: white;
float: left;
font: 3em/1.2 Georgia, 'Times New Roman', Times, serif;
margin: 4px 8px 0px 0px;
padding: 0px 3px;
}
3em would be three lines. 2em would be 2 lines. 2.5em, unfortunately, is 2.5
lines, hence the space between the cap and the line.
On your Q example, this is going to look off-center, because it is. The tail
on the Q is a descender: it goes below the line. But an H is going to look
nice and centered. There's nothing you can do about that.
---Tim
______________________________________________________________________
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/
