CODEWITHSUNDEEP
htmlcss
sangil
sangil

Reputation: 1320

disable the padding inside an html span element

How can I define a span such that its contents reach to the span's borders with no padding? I have tried setting the padding on both the containing div and on the span itself to '0', but this hasn't worked.

You can see in the example the number has whitespace all around it - especially on the top and bottom. This is what I am trying to eliminate - so that the span's borders actually touch the number.

Upvotes: 0

Views: 115

Answers (1)

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

The White space above the numbers is not caused by the padding, but instead it's caused by the fonts line height.

You can play around with a lineheight that is less than one, and it should give you the results you're looking for.

span {
    font-size: 64pt;
    padding: 0;
    line-height: .7;
}

Not quite perfect, but it'll change from font to font.

Fiddle

Upvotes: 1

Related Questions