Padding

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

Examples

Padding properties and sizes with class names for each utility
Properties	0	0.25rem	0.5rem	1rem	1.5rem	2rem
padding	.p-0	.p-1	.p-2	.p-3	.p-4	.p-5
padding-block-start	.pt-0	.pt-1	.pt-2	.pt-3	.pt-4	.pt-5
padding-block-end	.pb-0	.pb-1	.pb-2	.pb-3	.pb-4	.pb-5
padding-inline-start	.ps-0	.ps-1	.ps-2	.ps-3	.ps-4	.ps-5
padding-inline-end	.pe-0	.pe-1	.pe-2	.pe-3	.pe-4	.pe-5
padding-block	.py-0	.py-1	.py-2	.py-3	.py-4	.py-5
padding-inline	.px-0	.px-1	.px-2	.px-3	.px-4	.px-5

Compiled CSS

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

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 .p-0 utility.

.p-0
.p-0-xl
.p-0-lg
.p-0-md
.p-0-sm
.p-0-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 padding-css;

// Example breakpoint
@media (max-width: 480px) {
  @include padding-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

_padding.scss

// ------------------------------------------------------------
// Margins and padding utilities
// ------------------------------------------------------------
$padding-0: 0;
$padding-1: .25rem !default;
$padding-2: .5rem !default;
$padding-3: 1rem !default;
$padding-4: 1.5rem !default;
$padding-5: 2rem !default;

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

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

// Breakpoints
// Large
@mixin padding-xl-css {
  @each $name, $value in $padding-sizes {
    .p-#{$name}-xl {
      padding: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pt-#{$name}-xl {
      padding-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pb-#{$name}-xl {
      padding-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .ps-#{$name}-xl {
      padding-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pe-#{$name}-xl {
      padding-inline-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .py-#{$name}-xl {
      padding-block: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .px-#{$name}-xl {
      padding-inline: #{$value};        
    }
  }
}

// Large
@mixin padding-lg-css {
  @each $name, $value in $padding-sizes {
    .p-#{$name}-lg {
      padding: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pt-#{$name}-lg {
      padding-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pb-#{$name}-lg {
      padding-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .ps-#{$name}-lg {
      padding-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pe-#{$name}-lg {
      padding-inline-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .py-#{$name}-lg {
      padding-block: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .px-#{$name}-lg {
      padding-inline: #{$value};        
    }
  }
}

// Medium
@mixin padding-md-css {
  @each $name, $value in $padding-sizes {
    .p-#{$name}-md {
      padding: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pt-#{$name}-md {
      padding-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pb-#{$name}-md {
      padding-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .ps-#{$name}-md {
      padding-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pe-#{$name}-md {
      padding-inline-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .py-#{$name}-md {
      padding-block: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .px-#{$name}-md {
      padding-inline: #{$value};        
    }
  }
}

// Small
@mixin padding-sm-css {
  @each $name, $value in $padding-sizes {
    .p-#{$name}-sm {
      padding: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pt-#{$name}-sm {
      padding-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pb-#{$name}-sm {
      padding-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .ps-#{$name}-sm {
      padding-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pe-#{$name}-sm {
      padding-inline-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .py-#{$name}-sm {
      padding-block: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .px-#{$name}-sm {
      padding-inline: #{$value};        
    }
  }
}

// Extra small
@mixin padding-xs-css {
  @each $name, $value in $padding-sizes {
    .p-#{$name}-xs {
      padding: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pt-#{$name}-xs {
      padding-block-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pb-#{$name}-xs {
      padding-block-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .ps-#{$name}-xs {
      padding-inline-start: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .pe-#{$name}-xs {
      padding-inline-end: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .py-#{$name}-xs {
      padding-block: #{$value};        
    }
  }
  
  @each $name, $value in $padding-sizes {
    .px-#{$name}-xs {
      padding-inline: #{$value};        
    }
  }
}