css - 如何消除第二行后的空格？

Question

这是代码：

#content{width:400px;}
h2{margin:0px;line-height:100px;}

<div id="content">
    <h2>Hello world. Hello world. Hello world. Hello world. Hello world.</h2>
    <span>goodbyeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
</div>

在此处查看代码如何工作

我需要一种方法将“goodbyeeeeee..”字符串放在 h2 标题下方 2px 处，而不使用（如果可能的话）使用带负数的边距）。

显然，我还需要 h2 标题的 2 行之间的空间。

编辑：我也可以避免使用 line-height 但我需要 h2 标题的 2 行之间的空间。

Answer 1

我认为改变line-height行为方式是不可能的。它将文本放在h2100px 高线的中间。

所以，对不起，但没有。除非您找到摆脱该line-height属性的方法，否则您将无法使用负边距。或相对位置。

编辑：
如果您确实使用了负边距，请放入h2本身，而不是在您当前页面中碰巧出现在它之后的任何其他元素上。是导致问题的h2原因，所以这就是你应该解决它的地方。

Answer 2

设置高度可以做到，视情况而定。

h2{margin:0px;line-height:100px;height: 157px;}

Answer 3

如果你想要两行之间的大间距h2但想要span文本拥抱第二行的底部h2，你可以将跨度设置display: block为强制负边距：

h2{margin:0px; line-height:100px;}
span{display: block; margin-top:-40px;}