一行文本的CSS高度是多少？它似乎並沒有被1EM

看看這個小提琴：一行文本的CSS高度是多少？它似乎並沒有被1EM

function toggle(event) { 
 
    var element = document.getElementById('changeme'); 
 
    element.innerText = element.innerText ? '' : 'some text'; 
 
} 
 
button = document.getElementById('button'); 
 
button.onclick = toggle;

#changeme { 
 
    min-height: 1em; 
 
    outline: 1px solid red; 
 
}

<input id=button type=button value='Toggle content'> 
 
<p id=changeme>dynamically changing content 
 
<p>This should not move (up and down)

我有一個文本元素存在（它是一個<p>，但可能是一個<div>），我有時會設置爲空。（使用按鈕在空白內容和某些內容之間切換。）

此元素與一行文字有什麼高度？我想要一個通用的答案，所以我可以將它的min-height設置爲該值，以便該元素在空時不會摺疊。我認爲1em是我正在尋找的，但是1em似乎是像「W」這樣的字母的大小，沒有像「g」這樣的字母的基線以下的空間。

我正在尋找一個巧妙的方法來給可能爲空元素恆定的高度，沒有把 進去。（目前，我使用1.5em。）

來源

2014-10-10 Robert Siemer

在大多數網頁瀏覽器中，'line-height'的默認值是'1.2' /'1.2em'或'120％'。 – 2014-10-10 16:31:43

as @HashemQolami said：http://jsfiddle.net/webtiki/4g9wnptp/19/ – 2014-10-10 16:33:13

相關問題：http://stackoverflow.com/questions/7849506/finding-setting-css-line-height-defaults http：///stackoverflow.com/questions/16163788/line-height-default-value-if-font-size-is-100 – 2014-10-10 16:38:45

線的高度的精確計算是複雜的（見CSS 2.1節10 Visual formatting model details），但是在簡單的情況下是這樣，該高度是由line-height值時該元件確定不是空的。當它爲空時，高度將爲空，但min-height設置強制高度爲字體大小（1em）。

的line-height初始值是瀏覽器依賴性的，並且預期到依賴於字體，太。實際上，默認值總是大於字體大小。這解釋了這裏發生的事情。

爲了保持高度恆定，最好明確地設置它的line-height並將min-height設置爲相同的值，例如，

#changeme { 
    line-height: 1.25em; 
    min-height: 1.25em; 
}

注：em單元裝置的字體，這是通過定義字體的高度的尺寸。這是一個參考數量，通常不對應任何字母的高度（或寬度）;大多數字母的高度小於字體大小（儘管這取決於字母和字體）。

來源

2014-10-10 17:46:43

看看我在CSS 2.1的第10.6.1節中還發現了什麼：「注意：CSS的第3級可能包括一個屬性以選擇對內容高度使用哪種字體度量。「... – 2014-10-12 10:25:26

默認line-height是normal（該屬性的有效CSS值）。不幸的是，您無法將min-height設置爲該值。

除了normal,line-height可以有固定的長度值（這裏不感興趣）或相對於font-size工作的因素。相當於normal的數字不僅僅依賴於瀏覽器，有趣的是。對於不同的字體，它的範圍通常在1.0到1.5之間（沒有單位）和 font-sizes！

因此將min-height設置爲1em和1.5em之間美麗的東西。然後將line-height設置爲相同的值以確保它實際上相同。

請注意，對於line-height em-unit或單位less的值意味着相同：前者是相對於當前字體大小的固定長度，後者是與字體大小相關的因素。

來源

2014-10-13 09:21:37

一行文本的CSS高度是多少？它似乎並沒有被1EM

回答

相關問題