Question

在这个jsFiddle中你可以看到一个带有一些span元素的div。

为什么第一行和顶部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;
}

Demo

或者您使用margin之类的，

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

Demo 1

Answer 2

如果您只想修复顶部间距，请查看以下解决方案。

<强> WORKING DEMO

代码更改：

<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

解决此问题

<强> DEMO

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

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

3 个答案: