Equal Padding

Currently building a few random websites to practice and make mistakes to learn from. This particular site is to have sections, each with the same ‘wrap’ giving the sections 4rem 2rem 4rem 2rem padding to space content.

My issue is that the top padding applies correctly, however the bottom padding is seemingly coming up short, I’ve tried a whole host of things to figure this out, line-height, changing the units from px, em, rem etc.

Visually we’re talking 10-15 pixels, nothing major but it’s bugging me, can’t notice anything in dev tools causing this.

<div class="white wrap">
  <div class="header">Equal Padding = Unequal?</div>
  <div class="section-introduction">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium, quis!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium, quis!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium, quis!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium, quis!</p>
    <div class="button-wrap">
      <a href="#" class="button button-green">Contact Us</a>
      <a href="#" class="button button-lavender">Read More</a>
    </div>
  </div>
</div>
@import url("https://use.typekit.net/usz5pwk.css");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #242424;
  font-family: 'proxima-nova', sans-serif;
  font-weight: 300;
  font-style: normal;
}

a {
  text-decoration: none;
  color: inherit;
}

.wrap {
  display: grid;
  padding: 0rem 2rem 4rem 2rem;
}

.header {
  font-size: 2rem;
  font-weight: 700;
  padding: 4rem 0rem 4rem 0rem;
  text-decoration: underline;
}

.white {
  background-color: #ffffff;
  color: #242424;
}

/* SECTION: INTRODUCTION */
.section-introduction {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

.button-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.button {
  padding: 1rem;
  text-align: center;
}

.button-green {
  background-color: #68c3a3;
}

.button-lavender {
  background-color: #f6efe9;
}

JSFiddle: https://jsfiddle.net/04awosne/19/

As far as I can see, all your 4rem padding is exactly 64px (4 x 16) as I would expect.
It may be the gap around the header appears bigger due to the gap about the text.
padding

On a side note, there are specific elements in HTML for things like headers and sections.

1 Like

Yes same for me.

Maybe a screenshot of where you see the difference would help :slight_smile: