Common UI pattern problem with a simple solution: Space elements without having an extra set of padding at the bottom of a container.

Intro

- 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?

markup.html

<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>

style.scss

div {
  padding: 10px;
}

p {
  & + p {
    margin-top: 15px;
  }
}


li {
  & + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #000;
  }
}

Good idea.

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