0

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.

Phil
  • 157,677
  • 23
  • 242
  • 245
Yuri Amancio
  • 1
  • I've added a runnable snippet to your question so we can all see what it produces but could you please illustrate what you expect the result to be and point out how it differs – Phil May 30 '23 at 05:38
  • I have a feeling your issue is the default browser styles for `

    ` tags are not being handled

     – Phil May 30 '23 at 05:41
  • I was expecting the margin-bottom of h1 to be 1rem (10px) separating the paragraph below, but somehow my paragraph is using 25px as a margin, whatever value I set as font-size, my browser is using as a margin, therefore increasing the space of h1 and the paragraph. my user agent stylesshet is applying 1em of margin-block-start and margin-block-end to my paragraph element. I was not expecting that behaviour. – Yuri Amancio May 30 '23 at 05:44
  • Yes Phil, the default browser styles for

    is doing that, but I can't remember if I had this issue in the past.

     – Yuri Amancio May 30 '23 at 05:46
  • 1
    That's why CSS resets are still popular – Phil May 30 '23 at 05:46
  • @Phil CSS resets are the CSS equivalent of tables for layout. An abomination for the unknowing. – Rob May 30 '23 at 11:38
  • @Rob are we talking about the same thing? I mean the base level stylesheets that normalise the browser defaults – Phil May 30 '23 at 14:07

1 Answers1

2

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

enter image description here enter image description here

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?

Valery
  • 715
  • 6
  • 19