爲什麼我的標題總是在字母下面有額外的空間？

這是我一直想知道的。出於某種原因，這發生了很多，我不知道爲什麼。我通常最終會給元素設置一個高度和一個線條高度，以便將文本置於其小框中。爲什麼我的標題總是在字母下面有額外的空間？

這是我的代碼：

<h3 class="hr_title">Things to know before</h3>

那麼這就是它的CSS。

.hr_title{ 
    background-color: navy; 
    color: white; 
    font-family:proxima-nova, sans-serif; 
    font-weight: 100; 
}

下面是它的外觀照片。

忘了提。即使我添加文本轉換：大寫或全部是大寫字母，也會發生這種情況。

來源

2016-12-24 Divern

因爲字母「G」的「東西知道」 – Jhecht

忘了提。即使我添加文本轉換：大寫或全部是大寫字母，也會發生這種情況。 – Divern

檢查Ouroborus的答案，因爲他解決了你所說的一切。我發現最簡單的辦法是避免讓你發瘋，就是在頂部和底部添加填充（通常不超過5px）。這樣看起來更有意思，那裏有間隔。 – Jhecht

這是用於具有下行字母的信件，例如g或j。即使你沒有使用帶下劃線的字母（例如全部大寫字母），它仍然是字符度量的一部分。

text-transform:uppercase只是改變了字母的外殼。它不會對字符度量做任何事情。例如，它不會刪除可容納下拉字符的字符佈局部分。

來源

2016-12-24 21:12:53 Ouroborus

哦，我現在明白了。 – Divern

正如已經指出的那樣，是由Ascender和Descender造成的。也看到這個漂亮的圖片來自維基百科：

在這裏，您可以在實踐中重新看到：

h3 { 
 
    background-color: navy; 
 
    color: white; 
 
    font-family:proxima-nova, sans-serif; 
 
    font-weight: 100; 
 
    font-size:5em; 
 
}

<h3>TEST gg Â</h3>

來源

2016-12-24 21:18:19 rekire

所以沒有辦法使上升高度和下降高度一樣嗎？ – Divern

不幸的不是。你可以嘗試自己糾正它，但我認爲這是不值得去嘗試。 – rekire

但是，如果你想嘗試'padding-top：0.01em;'可能會幫助你。你可以玩這個價值。 – rekire

-1

也有烤成一些元素標籤的默認邊距。如果你沒有使用CSS重置或標準化片段，那麼它會影響它。

margin: 0; padding: 0;將修復它

來源

2016-12-24 23:09:20

爲什麼我的標題總是在字母下面有額外的空間？

回答

相關問題