Skip to main content

Margins - vertical

These margin styles set the top and bottom margins.

The size of the margin is set with the margin variables.

Each margin size has a class to go with each of the media query viewport sizes. For example:

my-2-3xs
my-2-2xs
my-2-xs
my-2-sm
my-2-md
my-2-lg
my-2-xl
my-2-1xl
my-2-3xl
my-2-4xl
my-2-5xl

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/margin/vertical.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/margin/3xs/vertical.css';
@import 'cacao-css/dist/margin/2xs/vertical.css';
@import 'cacao-css/dist/margin/xs/vertical.css';
@import 'cacao-css/dist/margin/sm/vertical.css';
@import 'cacao-css/dist/margin/md/vertical.css';
@import 'cacao-css/dist/margin/lg/vertical.css';
@import 'cacao-css/dist/margin/xl/vertical.css';
@import 'cacao-css/dist/margin/2xl/vertical.css';
@import 'cacao-css/dist/margin/3xl/vertical.css';
@import 'cacao-css/dist/margin/4xl/vertical.css';
@import 'cacao-css/dist/margin/5xl/vertical.css';

See Import Cacao CSS for more information.

Source CSS​

Default styles​

margin/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */


.my-0 {
    margin-top: var(--margin-0);
    margin-bottom: var(--margin-0);
}

.my-1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
}

.my-2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
}

.my-3 {
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-3);
}

.my-4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
}

.my-5 {
    margin-top: var(--margin-5);
    margin-bottom: var(--margin-5);
}

.my-6 {
    margin-top: var(--margin-6);
    margin-bottom: var(--margin-6);
}

.my-7 {
    margin-top: var(--margin-7);
    margin-bottom: var(--margin-7);
}

.my-8 {
    margin-top: var(--margin-8);
    margin-bottom: var(--margin-8);
}

.my-9 {
    margin-top: var(--margin-9);
    margin-bottom: var(--margin-9);
}

.my-10 {
    margin-top: var(--margin-10);
    margin-bottom: var(--margin-10);
}

.my-11 {
    margin-top: var(--margin-11);
    margin-bottom: var(--margin-11);
}

.my-12 {
    margin-top: var(--margin-12);
    margin-bottom: var(--margin-12);
}

.my-13 {
    margin-top: var(--margin-13);
    margin-bottom: var(--margin-13);
}

.my-14 {
    margin-top: var(--margin-14);
    margin-bottom: var(--margin-14);
}

.my-15 {
    margin-top: var(--margin-15);
    margin-bottom: var(--margin-15);
}

3xs styles​

margin/3xs/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-3xs) {
    .my-0-3xs {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-3xs {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-3xs {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-3xs {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-3xs {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-3xs {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-3xs {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-3xs {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-3xs {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-3xs {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-3xs {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-3xs {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-3xs {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-3xs {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-3xs {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-3xs {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

2xs styles​

margin/2xs/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-2xs) {
    .my-0-2xs {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-2xs {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-2xs {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-2xs {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-2xs {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-2xs {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-2xs {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-2xs {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-2xs {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-2xs {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-2xs {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-2xs {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-2xs {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-2xs {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-2xs {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-2xs {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

xs styles​

margin/xs/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-xs) {
    .my-0-xs {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-xs {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-xs {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-xs {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-xs {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-xs {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-xs {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-xs {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-xs {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-xs {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-xs {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-xs {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-xs {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-xs {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-xs {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-xs {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

sm styles​

margin/sm/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-sm) {
    .my-0-sm {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-sm {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-sm {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-sm {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-sm {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-sm {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-sm {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-sm {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-sm {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-sm {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-sm {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-sm {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-sm {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-sm {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-sm {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-sm {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

md styles​

margin/md/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-md) {
    .my-0-md {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-md {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-md {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-md {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-md {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-md {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-md {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-md {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-md {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-md {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-md {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-md {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-md {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-md {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-md {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-md {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

lg styles​

margin/lg/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-lg) {
    .my-0-lg {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-lg {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-lg {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-lg {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-lg {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-lg {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-lg {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-lg {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-lg {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-lg {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-lg {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-lg {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-lg {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-lg {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-lg {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-lg {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

xl styles​

margin/xl/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-xl) {
    .my-0-xl {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-xl {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-xl {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-xl {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-xl {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-xl {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-xl {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-xl {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-xl {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-xl {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-xl {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-xl {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-xl {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-xl {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-xl {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-xl {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

2xl styles​

margin/2xl/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-2xl) {
    .my-0-2xl {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-2xl {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-2xl {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-2xl {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-2xl {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-2xl {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-2xl {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-2xl {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-2xl {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-2xl {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-2xl {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-2xl {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-2xl {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-2xl {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-2xl {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-2xl {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

3xl styles​

margin/3xl/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-3xl) {
    .my-0-3xl {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-3xl {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-3xl {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-3xl {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-3xl {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-3xl {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-3xl {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-3xl {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-3xl {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-3xl {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-3xl {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-3xl {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-3xl {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-3xl {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-3xl {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-3xl {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

4xl styles​

margin/4xl/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-4xl) {
    .my-0-4xl {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-4xl {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-4xl {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-4xl {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-4xl {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-4xl {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-4xl {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-4xl {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-4xl {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-4xl {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-4xl {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-4xl {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-4xl {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-4xl {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-4xl {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-4xl {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}

5xl styles​

margin/5xl/vertical.css
/* =========================================================================== *
   Vertical margin utilities
 * =========================================================================== */

@media (--m-5xl) {
    .my-0-5xl {
        margin-bottom: var(--margin-0);
        margin-top: var(--margin-0);
    }

    .my-1-5xl {
        margin-bottom: var(--margin-1);
        margin-top: var(--margin-1);
    }

    .my-2-5xl {
        margin-bottom: var(--margin-2);
        margin-top: var(--margin-2);
    }

    .my-3-5xl {
        margin-bottom: var(--margin-3);
        margin-top: var(--margin-3);
    }

    .my-4-5xl {
        margin-bottom: var(--margin-4);
        margin-top: var(--margin-4);
    }

    .my-5-5xl {
        margin-bottom: var(--margin-5);
        margin-top: var(--margin-5);
    }

    .my-6-5xl {
        margin-bottom: var(--margin-6);
        margin-top: var(--margin-6);
    }

    .my-7-5xl {
        margin-bottom: var(--margin-7);
        margin-top: var(--margin-7);
    }

    .my-8-5xl {
        margin-bottom: var(--margin-8);
        margin-top: var(--margin-8);
    }

    .my-9-5xl {
        margin-bottom: var(--margin-9);
        margin-top: var(--margin-9);
    }

    .my-10-5xl {
        margin-bottom: var(--margin-10);
        margin-top: var(--margin-10);
    }

    .my-11-5xl {
        margin-bottom: var(--margin-11);
        margin-top: var(--margin-11);
    }

    .my-12-5xl {
        margin-bottom: var(--margin-12);
        margin-top: var(--margin-12);
    }

    .my-13-5xl {
        margin-bottom: var(--margin-13);
        margin-top: var(--margin-13);
    }

    .my-14-5xl {
        margin-bottom: var(--margin-14);
        margin-top: var(--margin-14);
    }

    .my-15-5xl {
        margin-bottom: var(--margin-15);
        margin-top: var(--margin-15);
    }
}