如何在HTML中使用ascender/descender/normal字母進行填充？

在我們的頁面上，我們在字母「f」的底部和填充在字母「p」下面的2px之間有5px。我們試圖弄清楚是否padding-bottom：5px;在CSS中應該從「f」的底部或「p」的底部開始感謝您的幫助，奇怪的問題！如何在HTML中使用ascender/descender/normal字母進行填充？

來源

2011-01-14 OldDrunkenSailor

你測試了嗎？ – 2011-01-14 19:30:22

只給元素一個背景顏色。然後你可以看到它將開始添加填充。我的猜測是，它也取決於你使用的字體。 – Gerben 2011-01-14 19:36:48

填充底部一般延伸到文本下方的下方，即它是額外的空間加上單獨文本的內容。

它也可能有助於明確設置行高，所以像1.2這樣的值。這將有助於使您的結果在瀏覽器中更加一致，如line-height：normal實際上不是。有關該問題的更詳細討論，請參閱line-height: abnormal。

來源

2011-01-14 19:33:02

的line-height應該幫助你 -
所有字母的高度應適合在給定的行高度 -
例如：

.test 
{ 
    font-size  : 50px; 
    line-height  : 10px; 
    padding-top  : 5px; 
    padding-bottom : 5px; 
} 

<div class="test"> 
    Hello Wquorld 
</div>

這不能適合─所以div的完整高度是line-height + padding-top + padding-bottom（20px）。文本會在頂部和底部溢出。

我做了一個quick example。我總是使用firebug工具（Firefox的擴展），它可以向您顯示實時元素的填充和邊距。
可以在w3.org上找到更多深入信息： 10視覺格式模型詳細信息 - > 10.8 w3.org頁面的線高計算。地址：w3.org/TR/CSS21/visudet.html#line-height（因垃圾郵件阻止而沒有鏈接）

來源

2011-01-14 20:18:00

如何在HTML中使用ascender/descender/normal字母進行填充？

回答

相關問題