Margin Utilities

Shipyard’s margin utilities are useful for overriding the default margin in any component, and can be extremely useful in a wide array of situations.

Margin All Sides .{ screen }-m-{ 0..40 }

The examples below demonstrate how much margin will be added to the top and bottom of any element the classes is applied to.

.m-0
.m-5
.m-10
.m-15
.m-20
.m-30
.m-40
.m-auto

Margin Top & Bottom .{ screen }-m{ t, b }-{ 0..40 }

The examples below demonstrate how much margin will be added to the top and bottom of any element the classes is applied to.

.mb-0
.mt-0
.mb-5
.mt-5
.mb-10
.mt-10
.mb-15
.mt-15
.mb-20
.mt-20
.mb-30
.mt-30
.mb-40
.mt-40

Margin Left & Right .{ screen }-m{ l, r }-{ 0..40 }

The examples below demonstrate how much margin will be added to the left and right sides of any element the classes is applied to.

.ml-0
.ml-5
.ml-10
.ml-15
.ml-20
.ml-30
.ml-40
.mr-0
.mr-5
.mr-10
.mr-15
.mr-20
.mr-30
.mr-40

Component CSS

.m-0 { margin: 0 }
.m-5 { margin: 5px }
.m-10 { margin: 10px }
.m-15 { margin: 15px }
.m-20 { margin: 20px }
.m-30 { margin: 30px }
.m-40 { margin: 40px }
.m-auto { margin: auto }
.mt-0 { margin-top: 0 }
.mb-0 { margin-bottom: 0 }
.ml-0 { margin-left: 0 }
.mr-0 { margin-right: 0 }
.mt-5 { margin-top: 5px }
.mb-5 { margin-bottom: 5px }
.ml-5 { margin-left: 5px }
.mr-5 { margin-right: 5px }
.mt-10 { margin-top: 10px }
.mb-10 { margin-bottom: 10px }
.ml-10 { margin-left: 10px }
.mr-10 { margin-right: 10px }
.mt-15 { margin-top: 15px }
.mb-15 { margin-bottom: 15px }
.ml-15 { margin-left: 15px }
.mr-15 { margin-right: 15px }
.mt-20 { margin-top: 20px }
.mb-20 { margin-bottom: 20px }
.ml-20 { margin-left: 20px }
.mr-20 { margin-right: 20px }
.mt-30 { margin-top: 30px }
.mb-30 { margin-bottom: 30px }
.ml-30 { margin-left: 30px }
.mr-30 { margin-right: 30px }
.mt-40 { margin-top: 40px }
.mb-40 { margin-bottom: 40px }
.ml-40 { margin-left: 40px }
.mr-40 { margin-right: 40px }
.mt-auto { margin-top: auto }
.mb-auto { margin-bottom: auto }
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }

@media screen and (min-width:  576px) {
  .sm:m-0 { margin: 0 }
  .sm:m-5 { margin: 5px }
  .sm:m-10 { margin: 10px }
  .sm:m-15 { margin: 15px }
  .sm:m-20 { margin: 20px }
  .sm:m-30 { margin: 30px }
  .sm:m-40 { margin: 40px }
  .sm:m-auto { margin: auto }
  .sm:mt-0 { margin-top: 0 }
  .sm:mb-0 { margin-bottom: 0 }
  .sm:ml-0 { margin-left: 0 }
  .sm:mr-0 { margin-right: 0 }
  .sm:mt-5 { margin-top: 5px }
  .sm:mb-5 { margin-bottom: 5px }
  .sm:ml-5 { margin-left: 5px }
  .sm:mr-5 { margin-right: 5px }
  .sm:mt-10 { margin-top: 10px }
  .sm:mb-10 { margin-bottom: 10px }
  .sm:ml-10 { margin-left: 10px }
  .sm:mr-10 { margin-right: 10px }
  .sm:mt-15 { margin-top: 15px }
  .sm:mb-15 { margin-bottom: 15px }
  .sm:ml-15 { margin-left: 15px }
  .sm:mr-15 { margin-right: 15px }
  .sm:mt-20 { margin-top: 20px }
  .sm:mb-20 { margin-bottom: 20px }
  .sm:ml-20 { margin-left: 20px }
  .sm:mr-20 { margin-right: 20px }
  .sm:mt-30 { margin-top: 30px }
  .sm:mb-30 { margin-bottom: 30px }
  .sm:ml-30 { margin-left: 30px }
  .sm:mr-30 { margin-right: 30px }
  .sm:mt-40 { margin-top: 40px }
  .sm:mb-40 { margin-bottom: 40px }
  .sm:ml-40 { margin-left: 40px }
  .sm:mr-40 { margin-right: 40px }
  .sm:mt-auto { margin-top: auto }
  .sm:mb-auto { margin-bottom: auto }
  .sm:ml-auto { margin-left: auto }
  .sm:mr-auto { margin-right: auto }
}

@media screen and (min-width:  768px) {
  .md:m-0 { margin: 0 }
  .md:m-5 { margin: 5px }
  .md:m-10 { margin: 10px }
  .md:m-15 { margin: 15px }
  .md:m-20 { margin: 20px }
  .md:m-30 { margin: 30px }
  .md:m-40 { margin: 40px }
  .md:m-auto { margin: auto }
  .md:mt-0 { margin-top: 0 }
  .md:mb-0 { margin-bottom: 0 }
  .md:ml-0 { margin-left: 0 }
  .md:mr-0 { margin-right: 0 }
  .md:mt-5 { margin-top: 5px }
  .md:mb-5 { margin-bottom: 5px }
  .md:ml-5 { margin-left: 5px }
  .md:mr-5 { margin-right: 5px }
  .md:mt-10 { margin-top: 10px }
  .md:mb-10 { margin-bottom: 10px }
  .md:ml-10 { margin-left: 10px }
  .md:mr-10 { margin-right: 10px }
  .md:mt-15 { margin-top: 15px }
  .md:mb-15 { margin-bottom: 15px }
  .md:ml-15 { margin-left: 15px }
  .md:mr-15 { margin-right: 15px }
  .md:mt-20 { margin-top: 20px }
  .md:mb-20 { margin-bottom: 20px }
  .md:ml-20 { margin-left: 20px }
  .md:mr-20 { margin-right: 20px }
  .md:mt-30 { margin-top: 30px }
  .md:mb-30 { margin-bottom: 30px }
  .md:ml-30 { margin-left: 30px }
  .md:mr-30 { margin-right: 30px }
  .md:mt-40 { margin-top: 40px }
  .md:mb-40 { margin-bottom: 40px }
  .md:ml-40 { margin-left: 40px }
  .md:mr-40 { margin-right: 40px }
  .md:mt-auto { margin-top: auto }
  .md:mb-auto { margin-bottom: auto }
  .md:ml-auto { margin-left: auto }
  .md:mr-auto { margin-right: auto }
}

@media screen and (min-width:  992px) {
  .lg:m-0 { margin: 0 }
  .lg:m-5 { margin: 5px }
  .lg:m-10 { margin: 10px }
  .lg:m-15 { margin: 15px }
  .lg:m-20 { margin: 20px }
  .lg:m-30 { margin: 30px }
  .lg:m-40 { margin: 40px }
  .lg:m-auto { margin: auto }
  .lg:mt-0 { margin-top: 0 }
  .lg:mb-0 { margin-bottom: 0 }
  .lg:ml-0 { margin-left: 0 }
  .lg:mr-0 { margin-right: 0 }
  .lg:mt-5 { margin-top: 5px }
  .lg:mb-5 { margin-bottom: 5px }
  .lg:ml-5 { margin-left: 5px }
  .lg:mr-5 { margin-right: 5px }
  .lg:mt-10 { margin-top: 10px }
  .lg:mb-10 { margin-bottom: 10px }
  .lg:ml-10 { margin-left: 10px }
  .lg:mr-10 { margin-right: 10px }
  .lg:mt-15 { margin-top: 15px }
  .lg:mb-15 { margin-bottom: 15px }
  .lg:ml-15 { margin-left: 15px }
  .lg:mr-15 { margin-right: 15px }
  .lg:mt-20 { margin-top: 20px }
  .lg:mb-20 { margin-bottom: 20px }
  .lg:ml-20 { margin-left: 20px }
  .lg:mr-20 { margin-right: 20px }
  .lg:mt-30 { margin-top: 30px }
  .lg:mb-30 { margin-bottom: 30px }
  .lg:ml-30 { margin-left: 30px }
  .lg:mr-30 { margin-right: 30px }
  .lg:mt-40 { margin-top: 40px }
  .lg:mb-40 { margin-bottom: 40px }
  .lg:ml-40 { margin-left: 40px }
  .lg:mr-40 { margin-right: 40px }
  .lg:mt-auto { margin-top: auto }
  .lg:mb-auto { margin-bottom: auto }
  .lg:ml-auto { margin-left: auto }
  .lg:mr-auto { margin-right: auto }
}

@media screen and (min-width:  1200px) {
  .xl:m-0 { margin: 0 }
  .xl:m-5 { margin: 5px }
  .xl:m-10 { margin: 10px }
  .xl:m-15 { margin: 15px }
  .xl:m-20 { margin: 20px }
  .xl:m-30 { margin: 30px }
  .xl:m-40 { margin: 40px }
  .xl:m-auto { margin: auto }
  .xl:mt-0 { margin-top: 0 }
  .xl:mb-0 { margin-bottom: 0 }
  .xl:ml-0 { margin-left: 0 }
  .xl:mr-0 { margin-right: 0 }
  .xl:mt-5 { margin-top: 5px }
  .xl:mb-5 { margin-bottom: 5px }
  .xl:ml-5 { margin-left: 5px }
  .xl:mr-5 { margin-right: 5px }
  .xl:mt-10 { margin-top: 10px }
  .xl:mb-10 { margin-bottom: 10px }
  .xl:ml-10 { margin-left: 10px }
  .xl:mr-10 { margin-right: 10px }
  .xl:mt-15 { margin-top: 15px }
  .xl:mb-15 { margin-bottom: 15px }
  .xl:ml-15 { margin-left: 15px }
  .xl:mr-15 { margin-right: 15px }
  .xl:mt-20 { margin-top: 20px }
  .xl:mb-20 { margin-bottom: 20px }
  .xl:ml-20 { margin-left: 20px }
  .xl:mr-20 { margin-right: 20px }
  .xl:mt-30 { margin-top: 30px }
  .xl:mb-30 { margin-bottom: 30px }
  .xl:ml-30 { margin-left: 30px }
  .xl:mr-30 { margin-right: 30px }
  .xl:mt-40 { margin-top: 40px }
  .xl:mb-40 { margin-bottom: 40px }
  .xl:ml-40 { margin-left: 40px }
  .xl:mr-40 { margin-right: 40px }
  .xl:mt-auto { margin-top: auto }
  .xl:mb-auto { margin-bottom: auto }
  .xl:ml-auto { margin-left: auto }
  .xl:mr-auto { margin-right: auto }
}