Edit in JSFiddle

<h1>The Box Object</h1>

<div class="o-box box">
    <p>One</p>
</div>
<div class="o-box box">
    <p>One</p>
    <p>Two</p>
</div>
<div class="o-box box">
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
</div>
<div class="o-box box">
    <p>One</p>
    <p class="o-box__lip">Two (with a lip)</p>
    <p>Three</p>
</div>

/* ==========================================================================
   #BOX OBJECT
   ========================================================================== */


/**
 * The box object is just designed to create some padding on an element and
 * remove the margin from the first and last elements, keeping the spacing
 * around the contents consistent.
 */

.o-box {

    --o-box-spacing: 0.5em;

    padding: var(--o-box-spacing);

}

.o-box > :first-child {
    margin-top: 0;
}

.o-box > :last-child {
    margin-bottom: 0;
}

.o-box__lip {
    margin-left: calc(var(--o-box-spacing) * -1);
    margin-right: calc(var(--o-box-spacing) * -1);
    padding-left: var(--o-box-spacing);
    padding-right: var(--o-box-spacing);
}


/* ==========================================================================
   #PAGE STYLES
   ========================================================================== */
.box {
    border: 1px solid #000;
    margin-bottom: 1em;
}

.box > p {
    background-color: pink;
}