爲什麼<h1>和<h2>標籤具有當被放在一個<article>內相同的字體大小？

輸出：

然後我想，也許它只是我的眼睛騙誰我，所以我衡量它。

我竟然是相同的大小。

我看了下面的鏈接（http://w3c.github.io/html/rendering.html#sections-and-headings）我瞭解到它是基於層次結構的，但<h1>和<h2>處於同一層次上。

因此，<h1>應該是2em和<h2>應該是1.5em。

代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Headings</title> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <article> 
      <h1>This is h1.</h1> 
      <h2>This is h2.</h2> 
      <h3>This is h3.</h3> 
      <h4>This is h4.</h4> 
      <h5>This is h5.</h5> 
      <h6>This is h6.</h6> 
     </article> 
    </body> 
</html>

來源

2016-09-17 kexxcream

而不是測量字母，你可以檢查你的瀏覽器的控制檯「計算方式」。 – Lends

@Lends非常好的建議，謝謝。 – kexxcream

[您鏈接的規格]（http://w3c.github.io/html/rendering.html#sections-and-headings）表示'x h1'應該有1.5 em的字體大小，'x hgroup> h1〜h2'字體大小應爲1。17 em（其中'x'是'

'，'

頭的尺寸找到細節是由瀏覽器樣式表來確定（如果沒有被用戶樣式表中指定）。我嘗試了鉻。有開發者控制檯中我發現，Chrome是壓倒一切的風格H1至1.5em的文章，放在一邊，導航和部分

:-webkit-any(article,aside,nav,section) h1 { 
    font-size: 1.5em; 
    -webkit-margin-before: 0.83em; 
    -webkit-margin-after: 0.83em; 
}

來源

2016-09-17 14:56:39

這是一個好的開始。但「爲什麼」的問題依然存在。爲什麼h1的尺寸與'

'中的h2尺寸相同？ – kexxcream

這只是對DOM結構，因爲不同的元素有不同的默認樣式繼承。

看看這個link表格MDN。

<h1>Text A</h1> 

<header> 
    <h1>Text A</h1> 
</header> 
<section> 
    <header> 
     <h1>Text A</h1> 

    </header> 
</section> 
<article> 
    <header> 
     <h1>Text A</h1> 
      <section> 
       <header> 
        <h1>Text A</h1> 
       </header> 
      </section> 
    </header> 
</article>

JSFiddle

編輯

這是因爲文檔風格的要求。您可以在HTML 5.1 documentation @ 10.3.7 Sections and headings

來源

2016-09-17 13:44:21

鏈接並沒有解釋兩件事情：1）什麼是由h1和h2繼承的默認樣式？ 2）爲什麼h3，h4，h5和h6與h1和h2的尺寸不一樣？爲什麼只有h1和h2的尺寸相同？ – kexxcream

@kexxcream編輯我的帖子 –

仍然不回答我的問題。你說這是因爲「風格要求」，但究竟如何？這些信息在何處表示h1和h2在文章中呈現時的大小相同？ – kexxcream

h1{ 
font-size:2em; 
} 
h2{ 
font-size:1.5em; 
    }

<article> 
    <h1>This is heading 1.</h1> 
    <h2>This is heading 2.</h2> 
    <h3>This is heading 3.</h3> 
    <h4>This is heading 4.</h4> 
    <h5>This is heading 5.</h5> 
    <h6>This is heading 6.</h6> 
</article>

https://jsfiddle.net/razia/9wsc4vus/

來源

2016-09-17 14:40:22

相同的字體大小在文章H1和H2

回答

JSFiddle

相關問題