Skip to content

Instantly share code, notes, and snippets.

@manikrathee
Last active May 17, 2020 13:22
Show Gist options
  • Save manikrathee/6719554 to your computer and use it in GitHub Desktop.
Save manikrathee/6719554 to your computer and use it in GitHub Desktop.
Common UI pattern problem with a simple solution: Space elements without having an extra set of padding at the bottom of a container.
- Div has 10px padding on all sides.
- P or LI's have margin-bottom to space out the next element.
- What you're left with is a giant space at the bottom of the div from the combined properties: padding-bottom: 10px on the Div and margin-bottom: 15px on the last child element. So, instead of using :last-child to try and un-do the styles set on each element, why not set it differently in the first place?
<div>
<p>Here's a sentence</p>
<p>Here's another sentence</p>
<p>Oh damn, a third sentence.</p>
</div>
<div>
<ul>
<li>Uno</li>
<li>Maybe Another Uno</li>
<li>Boom. Uno x3</li>
</ul>
</div>
div {
padding: 10px;
}
p {
& + p {
margin-top: 15px;
}
}
li {
& + li {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #000;
}
}
@martinleblanc
Copy link

Good idea.

@oscarmarcelo
Copy link

Wonderful idea! How didn't I got to this before?
Starred. Thank you! :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment