行高和对齐问题

Question

我有一个元素，它可能比一行长，所以我必须设置行高> 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