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/
