Margins are not collpasing for <h1> and <p>

HTML/CSS
1

Anyone has any idea why my CSS is using font-style as a margin property in my code?
my paragraph element is applying 3.5rem of margin (35px) and the h1 margin-bottom of 1rem is not being applied, therefore not collapsing.

  <body>
    <h1>Heading one</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, vitae.
      Quis, explicabo numquam voluptatem consequatur distinctio molestiae vitae
      modi expedita itaque dolores officiis ipsa soluta deserunt quod ex. Natus
      quis obcaecati minima mollitia eveniet praesentium, itaque voluptas ut
      quidem assumenda, non possimus illo accusantium reiciendis dolorum ipsam
      facilis quo quae!
    </p>
    <h1>Heading one</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, vitae.
      Quis, explicabo numquam voluptatem consequatur distinctio molestiae vitae
      modi expedita itaque dolores officiis ipsa soluta deserunt quod ex. Natus
      quis obcaecati minima mollitia eveniet praesentium, itaque voluptas ut
      quidem assumenda, non possimus illo accusantium reiciendis dolorum ipsam
      facilis quo quae!
    </p>
  </body>

html {
  font-size: 62.5%;
}

body {
  margin: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
  font-size: 5rem;
  margin: 3rem 0 1rem;
}

p {
  font-size: 3.5rem;
}
2

I am pretty sure that if you use dev tools to inspect the paragraph element’s styles you will see that the user agent is also applying its own styling. You need to override it by explicitly setting your own value.

It is probably using em or rem values for the default margin.

In the future, you can avoid this by using CSS resets, normalizing, or other techniques to get the html styling to a controllable state.

3

Hi yes its because the default styles of the browser being applied or the ‘user agent style sheet’.

If you inspect your p element, then go to computed tab you will see ‘margin-block-start’ property is 35px. If you click the arrow on the left you can see the style sheet where this is being applied which is user-agent applying 1em which means 1 x the font size of the p element.

Because you set the font-size of p at 3.5rem, this means it is 35px size (because your html font-size is set at 62.5% which is 10px, so 10px x 3.5 = 35px). This is why the font size and the margin is the same for p element.

Because p element margin is greater than headline, then both margins collapses to use only the p element margin only.

Hope this helps!