行高和对齐问题

Question

我有一个元素，它可能长于一行，所以我必须设置一个行高＆gt; 1否则它看起来很糟糕。但是，如果我这样做，线条高于文本，文本居中。所以它与顶级不匹配。如何将文本的位置更改为行的顶部，还是有另一种方法可以在两行之间获得一些空间？

Answer 1

根据定义，行高在给定行高的字体大小中心。如果您有12px字体和16px行高，则文本将在16px中居中，在顶部和底部留下2px。

在保持线条高度的同时推动此文本的一种解决方案是为元素添加负边距并将其推向负面：

float: left;
margin-top: -2px;

Answer 2

试试这个：

<style type="text/css">
.spacer
{
 line-height:1px;
}

.spacer:after
{
 content:".";
 visibility:invisible;
 line-height:1px;
}
</style>

您可以在上面的CSS代码中增加行高，并像这样使用它：

your line one
<p class="spacer"></p>
your line two