Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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

like image 329
ivan Avatar asked Oct 18 '14 13:10

ivan


People also ask

How do I remove spaces between span tags?

What I have regarding the specific need is having a border between two spans and the space between the border and span should be the same. For my particular need, I found the two acceptable solutions too: Use CSS to float span. Add an extra space as follows: <span><a href="some link">A link</a>&nbsp;</span>

How do I remove extra space from header CSS?

You need to set your h1 tag to margin-top: 0px; in order to get rid of the extra white space. That should do the trick.


1 Answers

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>
like image 182
Hashem Qolami Avatar answered Nov 15 '22 08:11

Hashem Qolami