行高和對齊問題

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