74441


下記のコードを書いてみました。

[code]

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <style>
            html {
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        aaaaaaa
        <h1>h</h1>
        bbbb
    </body>
    </html>
    
[/code]

結果:  
[![画像の説明をここに入力](https://i.stack.imgur.com/mkBgO.png)](https://i.stack.imgur.com/mkBgO.png)

Chromeデベロッパーツール:  
[![画像の説明をここに入力](https://i.stack.imgur.com/pE6p9.png)](https://i.stack.imgur.com/pE6p9.png)

デベロッパーツールを見ると、ユーザーエージェントのスタイルシートが適用されてしまっているのがわかります。

ネットを見ると `border`は継承されないと書いている例をみますが、`font-size`は継承されると言及しているページを多くみます。確かに
htmlの子要素であるbody要素には継承されていますが、h1は例外なのでしょうか？（ほかにh2にも試しましたが、やはり継承されていませんでした）

なお

[code]

    h1 {
        font: inherit;
    }
    
[/code]

をCSSに加えると継承しました。


CC BY-SA 4.0
2021-03-05T15:02:11.487
74432
2021-03-06T04:35:33.543
2021-03-05T16:40:26.453
3060
9008
question
html css
h1のfont-sizeは親要素を継承しないのでしょうか？


継承されていますが、ユーザーエージェントのスタイルシートによるh1要素へのスタイル指定で上書きされています。  
その要素へのスタイル指定は、親から継承されたものよりもユーザーエージェントのスタイルシートによるものが優先されるからです。

> なお
[code]

>     h1 {
>        font: inherit;
>     }
>  
[/code]

>
> をCSSに加えると継承しました。

これはh1要素へ親から継承するように指定しているので、ユーザーエージェントのスタイルシートの指定よりも優先されます。


CC BY-SA 4.0
2021-03-06T03:10:25.347
74441
2021-03-06T04:35:33.543
2021-03-06T04:35:33.543
25936
25936
74432
answer