行高和对齐问题答案

【问题标题】：Problem with line-height and align行高和对齐问题
【发布时间】：2011-11-30 00:04:13
【问题描述】：

我有一个元素，它可能比一行长，所以我必须设置一个 line-height>1 否则它看起来很糟糕。但是，如果我这样做，则行高于文本，并且文本居中。所以它与顶部不匹配。如何将文本的位置更改为行首，或者是否有其他方法可以在两行之间留出一些空间？

【问题讨论】：

【解决方案1】：

根据定义，行高使字体大小在给定行高内居中。如果你有 12px 的字体和 16px 的行高，文本将在 16px 内居中，顶部和底部都留出 2px。

在保持行高的同时将文本向上推的一种解决方案是为元素添加负边距并将其向上推：

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

【讨论】：

【解决方案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

【讨论】：