CODEWITHSUNDEEP
css
Andrew Newby
Andrew Newby

Reputation: 5197

Extra margin showing below element?

For some reason, I've got an annoying padding/margin below my "large" font:

http://jsfiddle.net/o9gvgz8c/1/

I've enlarged the font more than I need, just to exaggerate the problem . The CSS in question is:

p::first-letter {
  font-size: 40px;font-family: 'Special Elite',cursive;padding-right: 2px
}

If I don't use a larger font as the start character, then its fine... but as soon as I make the first letter larger, it adds this margin in.

How can I get around this?

Upvotes: 2

Views: 62

Answers (4)

rorofromfrance
rorofromfrance

Reputation: 1904

Make sure to define your ::first-letter line-height property as either:

p::first-letter {
    font-size: 50px;font-family: 'Special Elite',cursive;
    padding-right: 2px;
    line-height: 16px;
}

or 

p::first-letter {
    font-size: 50px;font-family: 'Special Elite',cursive;
    padding-right: 2px;
    line-height: 100%;
}

http://jsfiddle.net/o9gvgz8c/3/

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

JS Fiddle

adding line-height will fix it

p::first-letter {
    font-size: 50px;
    font-family:'Special Elite', cursive;
    padding-right: 2px;
    line-height:10px;
}

Upvotes: 2

web-tiki
web-tiki

Reputation: 103790

You can remove that gap by specifying a line-height on the p element :

p{line-height:18px;}

DEMO

Upvotes: 1

Michael Banzon
Michael Banzon

Reputation: 4967

You can use relative sizing on the first letter and set the line-height property to the relative height 100%, like this:

p::first-letter {
    font-size: 200%;
    font-family: 'Special Elite',cursive;
    padding-right: 2px;
    line-height: 100%;
}

Upvotes: 1

Related Questions