Margins

A set of commonly used margin spacing utilities with module mixins for responsive modifiers.

Examples

Margin properties and sizes with class names for each utility
Properties	auto	0	0.25rem	0.5rem	1rem	1.5rem	2rem
margin	.m-auto	.m-0	.m-1	.m-2	.m-3	.m-4	.m-5
margin-block-start	.mt-auto	.mt-0	.mt-1	.mt-2	.mt-3	.mt-4	.mt-5
margin-block-end	.mb-auto	.mb-0	.mb-1	.mb-2	.mb-3	.mb-4	.mb-5
margin-inline-start	.ms-auto	.ms-0	.ms-1	.ms-2	.ms-3	.ms-4	.ms-5
margin-inline-end	.me-auto	.me-0	.me-1	.me-2	.me-3	.me-4	.me-5
margin-block	.my-auto	.my-0	.my-1	.my-2	.my-3	.my-4	.my-5
margin-inline	.mx-auto	.mx-0	.mx-1	.mx-2	.mx-3	.mx-4	.mx-5

Compiled CSS

.m-auto {
  margin: auto;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 1rem;
}

.m-4 {
  margin: 1.5rem;
}

.m-5 {
  margin: 2rem;
}

.mt-auto {
  margin-block-start: auto;
}

.mt-0 {
  margin-block-start: 0;
}

.mt-1 {
  margin-block-start: 0.25rem;
}

.mt-2 {
  margin-block-start: 0.5rem;
}

.mt-3 {
  margin-block-start: 1rem;
}

.mt-4 {
  margin-block-start: 1.5rem;
}

.mt-5 {
  margin-block-start: 2rem;
}

.mb-auto {
  margin-block-end: auto;
}

.mb-0 {
  margin-block-end: 0;
}

.mb-1 {
  margin-block-end: 0.25rem;
}

.mb-2 {
  margin-block-end: 0.5rem;
}

.mb-3 {
  margin-block-end: 1rem;
}

.mb-4 {
  margin-block-end: 1.5rem;
}

.mb-5 {
  margin-block-end: 2rem;
}

.ms-auto {
  margin-inline-start: auto;
}

.ms-0 {
  margin-inline-start: 0;
}

.ms-1 {
  margin-inline-start: 0.25rem;
}

.ms-2 {
  margin-inline-start: 0.5rem;
}

.ms-3 {
  margin-inline-start: 1rem;
}

.ms-4 {
  margin-inline-start: 1.5rem;
}

.ms-5 {
  margin-inline-start: 2rem;
}

.me-auto {
  margin-inline-end: auto;
}

.me-0 {
  margin-inline-end: 0;
}

.me-1 {
  margin-inline-end: 0.25rem;
}

.me-2 {
  margin-inline-end: 0.5rem;
}

.me-3 {
  margin-inline-end: 1rem;
}

.me-4 {
  margin-inline-end: 1.5rem;
}

.me-5 {
  margin-inline-end: 2rem;
}

.my-auto {
  margin-block: auto;
}

.my-0 {
  margin-block: 0;
}

.my-1 {
  margin-block: 0.25rem;
}

.my-2 {
  margin-block: 0.5rem;
}

.my-3 {
  margin-block: 1rem;
}

.my-4 {
  margin-block: 1.5rem;
}

.my-5 {
  margin-block: 2rem;
}

.mx-auto {
  margin-inline: auto;
}

.mx-0 {
  margin-inline: 0;
}

.mx-1 {
  margin-inline: 0.25rem;
}

.mx-2 {
  margin-inline: 0.5rem;
}

.mx-3 {
  margin-inline: 1rem;
}

.mx-4 {
  margin-inline: 1.5rem;
}

.mx-5 {
  margin-inline: 2rem;
}

Responsive mixins

Responsive modifier mixins are also provided with no pre-defined breakpoints so they can be included as modules with custom SCSS breakpoints, or alternatively enabled in the breakpoints included with the framework (see below). The following demonstrates the static and responsive names for the .m-auto utility.

.m-auto
.m-auto-xl
.m-auto-lg
.m-auto-md
.m-auto-sm
.m-auto-xs

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin(s) anywhere below.

custom.scss

@use "sassmods/scss/sassmods" as *;
@include margins-css;

// Example breakpoint
@media (max-width: 480px) {
  @include margins-sm-css;
}

See customizing for information about using the Sass and CSS variables in the source code (see below) to customize the styles, and Sass variables (on the using SassMods page) for other ways to use the variables to create custom styles.

Source

_margins.scss

// ------------------------------------------------------------
// Margins
// ------------------------------------------------------------
$margin-auto: auto;
$margin-0: 0;
$margin-1: .25rem !default;
$margin-2: .5rem !default;
$margin-3: 1rem !default;
$margin-4: 1.5rem !default;
$margin-5: 2rem !default;

$margins-sizes: (
  "auto": #{$margin-auto},
  "0": #{$margin-0},
  "1": #{$margin-1},
  "2": #{$margin-2},
  "3": #{$margin-3},
  "4": #{$margin-4},
  "5": #{$margin-5},
) !default;


@mixin margins-css {
  @each $name, $value in $margins-sizes {
    .m-#{$name} {
      margin: #{$value};        
    }
  }  
  
  @each $name, $value in $margins-sizes {
    .mt-#{$name} {
      margin-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .mb-#{$name} {
      margin-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .ms-#{$name} {
      margin-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .me-#{$name} {
      margin-inline-end: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .my-#{$name} {
      margin-block: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .mx-#{$name} {
      margin-inline: #{$value};        
    }
  }
}

// Breakpoints
// Extra large
@mixin margins-xl-css {
  @each $name, $value in $margins-sizes {
    .m-#{$name}-xl {
      margin: #{$value};        
    }
  }  
  
  @each $name, $value in $margins-sizes {
    .mt-#{$name}-xl {
      margin-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .mb-#{$name}-xl {
      margin-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .ms-#{$name}-xl {
      margin-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .me-#{$name}-xl {
      margin-inline-end: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .my-#{$name}-xl {
      margin-block: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .mx-#{$name}-xl {
      margin-inline: #{$value};        
    }
  }
}

// Large
@mixin margins-lg-css {
  @each $name, $value in $margins-sizes {
    .m-#{$name}-lg {
      margin: #{$value};        
    }
  }  
  
  @each $name, $value in $margins-sizes {
    .mt-#{$name}-lg {
      margin-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .mb-#{$name}-lg {
      margin-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .ms-#{$name}-lg {
      margin-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .me-#{$name}-lg {
      margin-inline-end: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .my-#{$name}-lg {
      margin-block: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .mx-#{$name}-lg {
      margin-inline: #{$value};        
    }
  }
}

// Medium
@mixin margins-md-css {
  @each $name, $value in $margins-sizes {
    .m-#{$name}-md {
      margin: #{$value};        
    }
  }  
  
  @each $name, $value in $margins-sizes {
    .mt-#{$name}-md {
      margin-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .mb-#{$name}-md {
      margin-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .ms-#{$name}-md {
      margin-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .me-#{$name}-md {
      margin-inline-end: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .my-#{$name}-md {
      margin-block: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .mx-#{$name}-md {
      margin-inline: #{$value};        
    }
  }
}

// Small
@mixin margins-sm-css {
  @each $name, $value in $margins-sizes {
    .m-#{$name}-sm {
      margin: #{$value};        
    }
  }  
  
  @each $name, $value in $margins-sizes {
    .mt-#{$name}-sm {
      margin-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .mb-#{$name}-sm {
      margin-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .ms-#{$name}-sm {
      margin-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .me-#{$name}-sm {
      margin-inline-end: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .my-#{$name}-sm {
      margin-block: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .mx-#{$name}-sm {
      margin-inline: #{$value};        
    }
  }
}


// Extra small

@mixin margins-xs-css {
  @each $name, $value in $margins-sizes {
    .m-#{$name}-xs {
      margin: #{$value};        
    }
  }  
  
  @each $name, $value in $margins-sizes {
    .mt-#{$name}-xs {
      margin-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .mb-#{$name}-xs {
      margin-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .ms-#{$name}-xs {
      margin-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $margins-sizes {
    .me-#{$name}-xs {
      margin-inline-end: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .my-#{$name}-xs {
      margin-block: #{$value};        
    }
  }
    
  @each $name, $value in $margins-sizes {
    .mx-#{$name}-xs {
      margin-inline: #{$value};        
    }
  }
}