why my font-size property is being used as a margin?

Question

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

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: 25px;
}

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

I was expecting the heading one to have margin-bottom of 1rem (10px) and to collapse with the paragraph top margin.

Answer 1

If you inspect your paragraphs in Chrome you will see the following:

The p is styled as an element with 1rem. Since your font-size is 25px, 1rem is 25px.

Your margins are actually collapsing - you are getting a 25px separation between your h1 and your p and not 35 (which would be the case if it didn't collapse).

As suggested by @Phil above, you probably want to reset the margins and paddings on p. See What's the purpose of using CSS browser reset code?