CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sja87
sja87

Reputation: 5

How can I remove gap between div and span

In this jsFiddle you can see a div with some span element in it.

http://jsfiddle.net/9H9Tg/1/

Why there is a gap between first line and the top div border line? Is it a default line-height? I have set no line-height in my css class.

http://h33i.img-up.net/Bildschirm4fda.png

How can I remove this gap in different browsers also with different fonts?

    <div id="draggable-title2">
<span style="color: rgb(0, 0, 0); font-family: verdana; font-size: 40px; padding-top: 0px;display: inline-block;">
    Hello World 
    <br />next line
    </span>
    </div>

Upvotes: 0

Views: 2189

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Add this in css

span{
    padding:0;
    line-height:30px;
}

Demo

Or you use margin like,

span{
    padding:0;
    line-height:33px;
    margin:-2px auto;
}

Demo 1

Upvotes: 3

Nitesh
Nitesh

Reputation: 15749

If you want to only fix the top spacing, check the below solution.

WORKING DEMO

The Code Change:

<span style="color: rgb(0, 0, 0); font-family: verdana; font-size: 40px; padding-top: 0px;display: inline-block; margin-top:-10px;">

Upvotes: 2

Selvamani
Selvamani

Reputation: 7684

You can fix this by using css line-height

DEMO

 <span style="color: rgb(0, 0, 0); font-family: verdana; font-size: 40px; padding-top: 0px;display: inline-block;line-height: 30px;">

Upvotes: 0

Related Questions