CODEWITHSUNDEEP
html
Shaheem PP
Shaheem PP

Reputation: 885

h1 size differs in Div tag and section tag

I used H1 tag inside section tag and div tag, but h1 in section tag is small rather than h1 tag in div tag. Why?

<section>
  <h1>Hello World</h1>
</section>
<h1>Hello World</h1>

<hr>

<div>
  <h1>Hello World</h1>
</div>
<h1>Hello World</h1>

This is the output

Upvotes: 1

Views: 259

Answers (1)

Quentin
Quentin

Reputation: 943579

Browsers have default stylesheets. You can use the Developer Tools in a browser to inspect what styles are applied to the element.

Chrome's developer tools (for example) show:

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

and

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

So that is just how the developers of Chrome decided that a top level heading for a section should be rendered. Other browser developers will have probably made similar choices.

If you don't like it, write your own CSS to override it.

Upvotes: 3

Related Questions