Functional CSS Lab

by Lloyd Atkinson

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<hr />

<p class="m-1">Margin 1</p>
<p class="m-2">Margin 2</p>
<p class="m-3">Margin 3</p>
<p class="m-4">Margin 4</p>
<p class="m-5">Margin 5</p>
<p class="m-6">Margin 6</p>
<p class="m-7">Margin 7</p>
<p class="m-8">Margin 8</p>
<p class="m-9">Margin 9</p>
<p class="m-10">Margin 10</p>

CSS

/* Margin  */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 0.75rem;
}

.m-4 {
    margin: 1rem;
}

.m-5 {
    margin: 1.5rem;
}

.m-6 {
    margin: 2rem;
}

.m-7 {
    margin: 2.5rem;
}

.m-8 {
    margin: 3rem;
}

.m-9 {
    margin: 5rem;
}

.m-10 {
    margin: 7rem;
}

/* Margin X  */
.mx-0 {
    margin-right: 0;
    margin-left: 0;
}

.mx-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}

.mx-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.mx-3 {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

.mx-4 {
    margin-right: 1rem;
    margin-left: 1rem;
}

.mx-5 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

.mx-6 {
    margin-right: 2rem;
    margin-left: 2rem;
}

.mx-7 {
    margin-right: 2.5rem;
    margin-left: 2.5rem;
}

.mx-8 {
    margin-right: 3rem;
    margin-left: 3rem;
}

.mx-9 {
    margin-right: 6rem;
    margin-left: 6rem;
}

.mx-10 {
    margin-right: 12rem;
    margin-left: 12rem;
}

/* Margin X  */
.my-0 {
    margin-right: 0;
    margin-left: 0;
}

.my-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}

.my-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.my-3 {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

.my-4 {
    margin-right: 1rem;
    margin-left: 1rem;
}

.my-5 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

.my-6 {
    margin-right: 2rem;
    margin-left: 2rem;
}

.my-7 {
    margin-right: 2.5rem;
    margin-left: 2.5rem;
}

.my-8 {
    margin-right: 3rem;
    margin-left: 3rem;
}

.my-9 {
    margin-right: 6rem;
    margin-left: 6rem;
}

.my-10 {
    margin-right: 12rem;
    margin-left: 12rem;
}