I have an h1 and a p inside a div. If i set font-size: 20px for the div.

Then the paragraph font size become 20px, but the font size of h1 get more bigger than 20px.

Why?

div {
  font-size: 50px;
}

<div>
  <h1 >Prova tag h1</h1>
  <p>Prova paragrafo</p>
  <a href="https:www.google.it">clicca per il link</a>
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</div>

CodePudding user response：

You can fix the h1 font-size to initial value:

div {
  font-size: 50px;
}

h1 {
  font-size: initial;
}

<div>
  <h1 >Prova tag h1</h1>
  <p>Prova paragrafo</p>
  <a href="https:www.google.it">clicca per il link</a>
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</div>

References about why:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

CodePudding user response：

Because the h1 is getting the size from another unit/value. It is supposed to be bigger than 1em because em is the unit that tells the browser to get the same size of the parent div.

You can solve this by these two methods:

method 1:

give h1 a style as shown below:

h1 { font-size: 1em !important;}

This code tells the browser to make h1 1 time of parent div so if you want to make it 2 times the parent div just put 2em instead.

This also could work:

h1 { font-size: inherit !important;}

This code tells the browser to make h1 as exact of the parent div

method 2:

Just give the style to h1 directly as shown below:

h1 { font-size: 20px !important;}