0

DevTools shows the margin-top of the h2 ('Profile') causes distance between header and the the h2. However, the parent of h2 - section - isn't expanding to accommodate this margin.

Previously it has in this sort of situation.

Is there a reason why?

https://codepen.io/rfrostr/pen/XWmzewp

<header>
  <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</header>

<section id="profile-section">
 <h2>Profile</h2>
 </section>
rfrostr
  • 91
  • 7

1 Answers1

-1

It's likely the margin-block-start and end. You can get rid of that or change it to whatever works for you by adding this to the styles:

p {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

h2 {
    margin-block-start: 0;
    margin-block-end: 0;
}
John
  • 5,132
  • 1
  • 6
  • 17
  • It might sound like a weird question but I'm wanting to know why when applying margin-bloc or just regular margin to h2, h2's container - section - doesn't expand to accomodate h2's margin? DevTools show h2's margin goes 'outside' the container. – rfrostr May 11 '20 at 23:08