Edit in JSFiddle

/* ==========================================================================
   #SPACING OBJECT
   ========================================================================== */


/**
 * The spacing object is a collection of helpful CSS custom properties to help
 * control spacing.
 *
 * NOTE: in this demo we're not assigning, just applying an additional style. In
 * a production environment, this wouldn't be the case. Keeping the separation
 * helps draw attention to the object itself.
 */

.o-spacing {
    --spacing: 0px;
    --spacing-horizontal: var(--spacing);
    --spacing-vertical: var(--spacing);
    --spacing-bottom: var(--spacing-vertical);
    --spacing-left: var(--spacing-horizontal);
    --spacing-right: var(--spacing-horizontal);
    --spacing-top: var(--spacing-vertical);
    --spacing-values:
        var(--spacing-top)
        var(--spacing-right)
        var(--spacing-bottom)
        var(--spacing-left);
}

/* Pre-set variants
   ========================================================================== */

.o-spacing--1 {
    --spacing: 1em;
}
.o-spacing--2 {
    --spacing: 2em;
}
.o-spacing--0-5 {
    --spacing: 0.5em;
}
.o-spacing--0-5_1 {
    --spacing-vertical: 0.5em;
    --spacing-horizontal: 1em;
}
.o-spacing--1_2 {
    --spacing-left: 1em;
    --spacing-right: 2em;
}
.o-spacing--1_2_3_4 {
    --spacing-top: 1em;
    --spacing-right: 2em;
    --spacing-bottom: 3em;
    --spacing-left: 4em;
}


/* ==========================================================================
   #SPACING OBJECT APPLICATIONS
   ========================================================================== */

th,
td {
    padding: var(--spacing-values);
}

/* Data table
   ========================================================================== */

.c-data {
    --spacing-horizontal: 1em;
    --spacing-vertical: 0.5em;
    border: 1px solid #000;
    border-collapse: collapse;
}

.c-data th,
.c-data td {
    border: 1px solid #000;
}

/* Box object
   ========================================================================== */

.o-box {
    padding: var(--spacing-values);
}

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

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

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

/* Media object
   ========================================================================== */

.o-media {

    --side-alignment: flex-start;
    --body-alignment: center;

    display: flex;
    flex-direction: row;
    width: 100%;

}

.o-media__left {
    align-self: var(--side-alignment);
    margin-right: var(--spacing-left);
}

.o-media__right {
    align-self: var(--side-alignment);
    margin-left: var(--spacing-right);
}

.o-media__body {
    align-self: var(--body-alignment);
    flex-grow: 1;
}


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

.c-p {
    background-color: pink;
}

.c-pic {
    background-color: blue;
    height: 2em;
    width: 2em;
}

<h1>The Spacing Object</h1>

<h2>Table</h2>

<p>Vertical spacing of 0.5em and horizontal spacing of 1em.</p>

<table class="[ o-spacing o-spacing--0-5_1 ] c-data">
    <tbody>
        <tr>
            <th scope="row">Letter</th>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <th scope="row">Number</th>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

<h2>Box object</h2>

<p>Spacing set to 2em.</p>

<div class="[ o-spacing o-spacing--2 ] o-box c-box">
    <p class="c-p">One</p>
    <p class="c-p o-box__lip">Two</p>
    <p class="c-p">Three</p>
    <p class="c-p">Four</p>
</div>

<p>Top spacing 1em, right spacing 2em, bottom spacing 3em and left spacing 4em.</p>

<div class="[ o-spacing o-spacing--1_2_3_4 ] o-box c-box">
    <p class="c-p">One</p>
    <p class="c-p o-box__lip">Two</p>
    <p class="c-p">Three</p>
    <p class="c-p">Four</p>
</div>


<h3>Nested boxes</h3>

<p>Different spacing amounts to show that nested spacing objects aren't affected by their parents.</p>

<div class="[ o-spacing o-spacing--2 ] o-box c-box">
    <p class="c-p">Level 1 - 2em</p>
    <div class="o-spacing o-box box">
        <p class="c-p">Level 2 - 0</p>
        <div class="[ o-spacing o-spacing--0-5 ] o-box c-box">
            <p class="c-p">Level 3 - 1em</p>
        </div>
    </div>
</div>

<h2>Media Object</h2>

<p>Left spacing set to 1em, right spacing set to 2em.</p>

<!--
Since the selectors aren't being combined in this example, the `o-spacing` class
needs to be manually added to each `o-box` class here.
-->

<div class="c-box o-media [ o-spacing o-spacing--1_2 ]">
    <div class="o-media__left"><div class="c-pic"></div></div>
    <div class="o-media__body o-box o-spacing"><p class="c-p">Body copy</p></div>
</div>

<div class="c-box o-media [ o-spacing o-spacing--1_2 ]">
    <div class="o-media__left"><div class="c-pic"></div></div>
    <div class="o-media__body o-box o-spacing">
        <p class="c-p">Body copy</p>
        <p class="c-p">Body copy</p>
        <p class="c-p">Body copy</p>
    </div>
</div>

<div class="c-box o-media [ o-spacing o-spacing--1_2 ]">
    <div class="o-media__body o-box o-spacing"><p class="c-p">Body copy</p></div>
    <div class="o-media__right"><div class="c-pic"></div></div>
</div>

<div class="c-box o-media [ o-spacing o-spacing--1_2 ]">
    <div class="o-media__left"><div class="c-pic"></div></div>
    <div class="o-media__body o-box o-spacing"><p class="c-p">Body copy</p></div>
    <div class="o-media__right"><div class="c-pic"></div></div>
</div>