なぜ<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

[specs you linked]（http://w3c.github.io/html/rendering.html#sections-and-headings）は、 'x h1'は1.5 emのフォントサイズと' x hgroup> h1〜h2'はfont-sizeが1でなければなりません。「

」、「

サイズは、ブラウザのスタイルシートによって決定されているの詳細を見つけることができます。私はクロムを試しました。そこデベロッパーコンソールで、私はクロムはさておき、記事の1.5emするH1のスタイルをオーバーライドしていることがわかった、ナビゲーションおよびセクション

:-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

EDIT

それは理由のドキュメントスタイルの要件です。あなたは（ユーザースタイルシートで指定されていない場合）、ヘッダーのHTML 5.1 documentation @ 10.3.7 Sections and headings

出典

2016-09-17 13:44:21

の2つのものについては説明していません：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

同じフォントサイズ

答えて

JSFiddle

関連する問題