javascript - 如何消除 div 和 span 之间的差距

Question

在这个 jsFiddle 中，您可以看到一个包含一些 span 元素的 div。

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

为什么第一行和顶部 div 边界线之间有间隙？它是默认的行高吗？我在我的 css 类中没有设置行高。

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

如何在使用不同字体的不同浏览器中消除这种差距？

    <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>

Answer 1

在css中添加这个

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

演示

或者你使用margin喜欢，

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

演示 1

Answer 2

如果您只想固定顶部间距，请检查以下解决方案。

工作演示

代码更改：

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

Answer 3

您可以使用 css 解决此问题line-height

演示

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