How to remove empty space in top/bottom of span?

Question

This is jsfiddle. I want to remove empty space in top and bottom in my text. I tried to use line-height, but its not what I need. How I can do it? Thanks.

span {
    font-size: 24px;
    font-weight: 600;
    font-family: 'Roboto';
}

enter image description here

why not line height? do you see any issue with that approach..? — Sachin, Oct 18 '14 at 13:24
Line height works, but I thought that exists another solution.. — ivan, Oct 18 '14 at 13:27
@Gunaseelan Interesting... recently I've found that 9 of 10 questions here have been answered earlier. — Hashem Qolami, Oct 18 '14 at 13:32
@HashemQolami People finds easy to ask a question rather than looking for similar questions that already solved — Gunaseelan, Oct 18 '14 at 13:43

score 3 · Accepted Answer · answered Oct 18 '14 at 13:26

This is not ideal, however you could play with height and line-height to achieve that:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
span {
    font-size: 50px;
    font-weight: 600;
    font-family: 'Roboto';

    display: inline-block;
    vertical-align: top;
    height: .75em;
    line-height: .75em;

    background-color: gold;
}

<span>Some Text</span>

How to remove empty space in top/bottom of span?

1 Answers1

Linked

Related