Spacing

Margin and padding spacing utilities, static sizes only with no responsive modifiers.

Examples

Margins compiled

.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;
}

Padding compiled

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 1rem;
}

.p-4 {
  padding: 1.5rem;
}

.p-5 {
  padding: 2rem;
}

.pt-0 {
  padding-block-start: 0;
}

.pt-1 {
  padding-block-start: 0.25rem;
}

.pt-2 {
  padding-block-start: 0.5rem;
}

.pt-3 {
  padding-block-start: 1rem;
}

.pt-4 {
  padding-block-start: 1.5rem;
}

.pt-5 {
  padding-block-start: 2rem;
}

.pb-0 {
  padding-block-end: 0;
}

.pb-1 {
  padding-block-end: 0.25rem;
}

.pb-2 {
  padding-block-end: 0.5rem;
}

.pb-3 {
  padding-block-end: 1rem;
}

.pb-4 {
  padding-block-end: 1.5rem;
}

.pb-5 {
  padding-block-end: 2rem;
}

.ps-0 {
  padding-inline-start: 0;
}

.ps-1 {
  padding-inline-start: 0.25rem;
}

.ps-2 {
  padding-inline-start: 0.5rem;
}

.ps-3 {
  padding-inline-start: 1rem;
}

.ps-4 {
  padding-inline-start: 1.5rem;
}

.ps-5 {
  padding-inline-start: 2rem;
}

.pe-0 {
  padding-inline-end: 0;
}

.pe-1 {
  padding-inline-end: 0.25rem;
}

.pe-2 {
  padding-inline-end: 0.5rem;
}

.pe-3 {
  padding-inline-end: 1rem;
}

.pe-4 {
  padding-inline-end: 1.5rem;
}

.pe-5 {
  padding-inline-end: 2rem;
}

.py-0 {
  padding-block: 0;
}

.py-1 {
  padding-block: 0.25rem;
}

.py-2 {
  padding-block: 0.5rem;
}

.py-3 {
  padding-block: 1rem;
}

.py-4 {
  padding-block: 1.5rem;
}

.py-5 {
  padding-block: 2rem;
}

.px-0 {
  padding-inline: 0;
}

.px-1 {
  padding-inline: 0.25rem;
}

.px-2 {
  padding-inline: 0.5rem;
}

.px-3 {
  padding-inline: 1rem;
}

.px-4 {
  padding-inline: 1.5rem;
}

.px-5 {
  padding-inline: 2rem;
}

Using the module

Add the sassmods.scss to your custom styles as below, use the Sass variables from the module's source code (see below) to customize the default property values if required, then include the Sass mixin anywhere below.

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

Using the framework

Enable the module in the sassmods-system.scss document as below, if required customize the styles or the Sass variables for the default property values directly in the source code (see below).

$enable-margins: true;
$enable-padding: true;

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins using Sass variables provided for the core property values that can be customized as described above.

Source

// ------------------------------------------------------------
// Margins and padding utilities
// ------------------------------------------------------------

// Sizes
$auto: auto;
$s0: 0;
$s1: .25rem !default;
$s2: .5rem !default;
$s3: 1rem !default;
$s4: 1.5rem !default;
$s5: 2rem !default;

$margins-sizes: (
  "auto": #{$auto},
  "0": #{$s0},
  "1": #{$s1},
  "2": #{$s2},
  "3": #{$s3},
  "4": #{$s4},
  "5": #{$s5},
) !default;

$padding-sizes: (
  "0": #{$s0},
  "1": #{$s1},
  "2": #{$s2},
  "3": #{$s3},
  "4": #{$s4},
  "5": #{$s5},
) !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};        
  }
}

} // end margin-css

// @if $enable-margins {@include margins;}

@mixin padding-css {

@each $name, $value in $padding-sizes {
  .p-#{$name} {
    padding: #{$value};        
  }
}

@each $name, $value in $padding-sizes {
  .pt-#{$name} {
    padding-block-start: #{$value};        
  }
}

@each $name, $value in $padding-sizes {
  .pb-#{$name} {
    padding-block-end: #{$value};        
  }
}

@each $name, $value in $padding-sizes {
  .ps-#{$name} {
    padding-inline-start: #{$value};        
  }
}

@each $name, $value in $padding-sizes {
  .pe-#{$name} {
    padding-inline-end: #{$value};        
  }
}

@each $name, $value in $padding-sizes {
  .py-#{$name} {
    padding-block: #{$value};        
  }
}

@each $name, $value in $padding-sizes {
  .px-#{$name} {
    padding-inline: #{$value};        
  }
}

} // end padding-css