HTML標籤是替換元素嗎？

Question

首先，替換元件from W3的定義：

代替元件

的元件，其內容是 CSS格式模型，諸如圖像，嵌入的文檔，或小應用程序的範圍之外。例如，HTML IMG元素的內容經常被其「src」屬性指定的圖像替換爲 。替換的元素通常具有固有的尺寸：固有寬度，固有高度，以及內在比率。例如，位圖圖像具有固有的寬度和以絕對單位指定的固有高度（其中顯然可以確定固有比率 ）。另一方面， 其他文檔可能沒有任何固有尺寸（例如， 空白HTML文檔）。

如果認爲這些尺寸可能會泄露 敏感信息給第三方，用戶代理可能會認爲替換的元素沒有任何固有的尺寸 尺寸。例如，如果HTML 文檔根據用戶的銀行餘額更改了固有大小，則UA可能希望充當該資源沒有固有 維度。

替換元素的內容未在CSS 渲染模型中考慮。

它似乎沒有關注label，對吧？

然後，我看到this blog post，這給這一個規則：

不能應用生成的內容替換元素。也就是說，你 不能應用僞元素選擇器：before或：after之後。

但我可以。

所以，我可以假設它不是一個被替代的元素（我缺乏經驗來證明相反）。

---

因此，根據MDN's doc約line-height：

案例1 - 在塊級元素，線高度CSS屬性指定的線框的元件內的 最小高度。

案例2 - 在非替換內聯元素上，行高指定 用於計算行盒高度的高度。

案例3 - 與替換內聯元素，如按鈕或其他輸入元素， 行高不起作用。

我建立JSfiddles來說明這些行爲，進行比較的塊元件（div）和標籤：

• Setting specific line-height directly on div and label - 行
• Setting line-height on wrapping form, and override it on div and label - 不OK時，兩個元件的行爲不同
• Setting line-height on wrapping form, label displayed as a block, overriding line-height on label and block - 好吧

那麼，label表現得像一個非替換的元素，但是當涉及覆蓋line-height時，它沒有。

我不明白，有人對此行爲有任何解釋嗎？畢竟標籤是被替換的元素嗎？

在W3.org，我已經看到了label是在措詞內容類別，我見過this post，但我沒有找到一個答案，我與它的問題。

^{測試是在Chrome 33（Mac）下進行的。}

Answer 1

HTML標籤是替換元素嗎？

沒有

不能應用生成的內容替換元素。也就是說，您不能將僞元素選擇器應用於：before或：after之後。

但我可以。

該帖說，你不能在替換元素使用:before或:after。

由於label是不一個替換元素，你可以使用和:before上:after它。

因此，您沒有看到任何與您正在閱讀的文檔相矛盾的內容。在包裝形式，並覆蓋它的div和標籤

---

設置的line-height - 不正常，這兩個元素表現不同

他們應該表現不同。

表單內部的內聯框是表單的行高。

該標籤是內聯的，所以它的內聯框放在表單的內聯框中。標籤的內聯框比它們所在的內聯框小。

div是一個塊元素，所以它的內聯框進入div本身內部，而不是表單的內聯框。

如果make the div display: inline那麼你比較是一個是inline，另一種是block的display: inline，而不是兩個元素，你會得到每一個相同的結果。