Spacing

OUDS Web includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

Margin and paddingLink to this section: Margin and padding

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from none to jumbo. Classes include fixed values on zoom (using px).

Using the CSS Grid layout module? Consider using the gap utility instead.

Notation for fixed valuesLink to this section: Notation for fixed values

Spacing utilities that apply to all breakpoints, from 2xs to 3xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for 2xs and {property}{sides}-{breakpoint}-{size} for xs, sm, md, lg, xl, 2xl, and 3xl.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

none - for classes that eliminate the margin or padding by setting it to $ouds-dimension-0, which is 0
3xs - for classes that set the margin or padding to $ouds-dimension-25, which is 2px
2xs - for classes that set the margin or padding to $ouds-dimension-50, which is 4px
xs - for classes that set the margin or padding to $ouds-dimension-100, which is 8px
sm - for classes that set the margin or padding to $ouds-dimension-150, which is 12px
md - for classes that set the margin or padding to $ouds-dimension-200, which is 16px
lg - for classes that set the margin or padding to $ouds-dimension-300, which is 24px
xl - for classes that set the margin or padding to $ouds-dimension-400, which is 32px
2xl - for classes that set the margin or padding to $ouds-dimension-500, which is 40px
3xl - for classes that set the margin or padding to $ouds-dimension-600, which is 48px
4xl - for classes that set the margin or padding to $ouds-dimension-700, which is 56px
5xl - for classes that set the margin or padding to $ouds-dimension-800, which is 64px
auto - for classes that set the margin to auto

(You can but shouldn’t add more sizes by adding entries to the $ouds-dimension-space-fixed Sass map variable.)

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .75
3 - (by default) for classes that set the margin or padding to $spacer * 1.5
4 - (by default) for classes that set the margin or padding to $spacer * 2.5
5 - (by default) for classes that set the margin or padding to $spacer * 3.5
auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Notation for scaled valuesLink to this section: Notation for scaled values

Spacing utilities that evolve across all breakpoints, from 2xs to 3xl, have no breakpoint abbreviation in them since they are auto-sufficient from a responsive point of view.

The classes are named using the format {property}{sides}-scaled-{size}.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

Size name	Size for mobile (`2xs` to `md`)	Size for tablet (`md` to `xl`)	Size for desktop (`xl` to `3xl` and above)
`none`	`0`	`0`	`0`
`3xs`	`2px`	`4px`	`4px`
`2xs`	`4px`	`8px`	`8px`
`xs`	`8px`	`12px`	`16px`
`sm`	`12px`	`16px`	`24px`
`md`	`16px`	`24px`	`32px`
`lg`	`24px`	`32px`	`40px`
`xl`	`32px`	`40px`	`48px`
`2xl`	`40px`	`48px`	`56px`
`3xl`	`48px`	`56px`	`64px`

(You can but shouldn’t add more sizes by adding entries to the $ouds-dimension-space-scaled Sass map variable.)

ExamplesLink to this section: Examples

Here are some representative examples of these classes:

.mt-none {
  margin-top: $ouds-space-fixed-none !important;
}

.ms-scaled-lg {
  margin-left: var(--bs-space-scaled-lg) !important;
}

.px-scaled-2xs {
  padding-right: var(--bs-space-scaled-2xs) !important;
  padding-left: var(--bs-space-scaled-2xs) !important;
}

.p-2xl {
  padding: $ouds-space-fixed-tall !important;
}

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

The first two examples show the scaled and fixed margin classes in action. The last one shows how to recreate an equivalent of .mx-scaled-lg by combining other responsive margin classes.

Please note that if you mix the scaled and fixed classes, the fixed classes will override the scaled ones.

Tall scaled x margin

Tall x margin (fixed)

Tall scaled x margin (manually)

<div class="mx-scaled-lg">Tall scaled x margin</div>
<div class="mx-lg">Tall x margin (fixed)</div>
<div class="mx-lg mx-md-xl mx-xl-2xl">Tall scaled x margin (manually)</div>

html

Horizontal centeringLink to this section: Horizontal centering

Additionally, OUDS Web also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element

<div class="mx-auto p-sm" style="width: 200px;">
  Centered element
</div>

Negative marginLink to this section: Negative margin

In CSS, margin properties can utilize negative values (padding cannot). These negative margins are disabled by default, but can be enabled in Sass by setting $enable-negative-margins: true.

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here are some example classes that are the opposite of .mt-sm and .ms-scaled-lg:

.mt-nsm {
  margin-top: -$ouds-space-fixed-sm !important;
}

.ms-scaled-nlg {
  margin-top: calc(-1 * var(--bs-space-scaled-lg)) !important;
}

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Here’s an example class that’s the opposite of .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

GapLink to this section: Gap

When using display: grid or display: flex, you can make use of gap utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the $ouds-dimension-space-fixed Sass map.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-lg">
  <div class="p-sm">Grid item 1</div>
  <div class="p-sm">Grid item 2</div>
  <div class="p-sm">Grid item 3</div>
  <div class="p-sm">Grid item 4</div>
</div>

html

Support includes responsive options for all of OUDS Web’s grid breakpoints, as well as sizes from the $ouds-dimension-space-fixed map (none–jumbo). There is no .gap-auto utility class as it’s effectively the same as .gap-none.

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

html

Support includes responsive options for all of OUDS Web’s grid breakpoints, as well as six sizes from the $spacers map (0–5). There is no .gap-auto utility class as it’s effectively the same as .gap-0.

row-gapLink to this section: row-gap

row-gap sets the vertical space between children items in the specified container.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid row-gap-lg">
  <div class="p-sm">Grid item 1</div>
  <div class="p-sm">Grid item 2</div>
  <div class="p-sm">Grid item 3</div>
  <div class="p-sm">Grid item 4</div>
</div>

html

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid row-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

html

column-gapLink to this section: column-gap

column-gap sets the horizontal space between children items in the specified container.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid column-gap-lg">
  <div class="p-sm">Grid item 1</div>
  <div class="p-sm">Grid item 2</div>
  <div class="p-sm">Grid item 3</div>
  <div class="p-sm">Grid item 4</div>
</div>

html

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid column-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

html

Scaled gapLink to this section: Scaled gap

We also provide scaled versions of the gap (including row-gap and column-gap). These are generated via our Utilities API, based on the $ouds-dimension-space-scaled Sass map.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-scaled-md">
  <div class="p-sm">Grid item 1</div>
  <div class="p-sm">Grid item 2</div>
  <div class="p-sm">Grid item 3</div>
  <div class="p-sm">Grid item 4</div>
</div>

html

CSSLink to this section: CSS

VariablesLink to this section: Variables

CSS variables that are used to build our scaled utilities.

scss/_root.scss

--#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-mobile};
--#{$prefix}space-scaled-3xs: #{$ouds-space-scaled-3xs-mobile};
--#{$prefix}space-scaled-2xs: #{$ouds-space-scaled-2xs-mobile};
--#{$prefix}space-scaled-xs: #{$ouds-space-scaled-xs-mobile};
--#{$prefix}space-scaled-sm: #{$ouds-space-scaled-sm-mobile};
--#{$prefix}space-scaled-md: #{$ouds-space-scaled-md-mobile};
--#{$prefix}space-scaled-lg: #{$ouds-space-scaled-lg-mobile};
--#{$prefix}space-scaled-xl: #{$ouds-space-scaled-xl-mobile};
--#{$prefix}space-scaled-2xl: #{$ouds-space-scaled-2xl-mobile};
--#{$prefix}space-scaled-3xl: #{$ouds-space-scaled-3xl-mobile};

@include media-breakpoint-up(md) {
  --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-tablet};
  --#{$prefix}space-scaled-3xs: #{$ouds-space-scaled-3xs-tablet};
  --#{$prefix}space-scaled-2xs: #{$ouds-space-scaled-2xs-tablet};
  --#{$prefix}space-scaled-xs: #{$ouds-space-scaled-xs-tablet};
  --#{$prefix}space-scaled-sm: #{$ouds-space-scaled-sm-tablet};
  --#{$prefix}space-scaled-md: #{$ouds-space-scaled-md-tablet};
  --#{$prefix}space-scaled-lg: #{$ouds-space-scaled-lg-tablet};
  --#{$prefix}space-scaled-xl: #{$ouds-space-scaled-xl-tablet};
  --#{$prefix}space-scaled-2xl: #{$ouds-space-scaled-2xl-tablet};
  --#{$prefix}space-scaled-3xl: #{$ouds-space-scaled-3xl-tablet};
}

@include media-breakpoint-up(xl) {
  --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-desktop};
  --#{$prefix}space-scaled-3xs: #{$ouds-space-scaled-3xs-desktop};
  --#{$prefix}space-scaled-2xs: #{$ouds-space-scaled-2xs-desktop};
  --#{$prefix}space-scaled-xs: #{$ouds-space-scaled-xs-desktop};
  --#{$prefix}space-scaled-sm: #{$ouds-space-scaled-sm-desktop};
  --#{$prefix}space-scaled-md: #{$ouds-space-scaled-md-desktop};
  --#{$prefix}space-scaled-lg: #{$ouds-space-scaled-lg-desktop};
  --#{$prefix}space-scaled-xl: #{$ouds-space-scaled-xl-desktop};
  --#{$prefix}space-scaled-2xl: #{$ouds-space-scaled-2xl-desktop};
  --#{$prefix}space-scaled-3xl: #{$ouds-space-scaled-3xl-desktop};
}

Sass tokensLink to this section: Sass tokens

Semantic tokensLink to this section: Semantic tokens

Spacing semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss

$ouds-space-fixed-2xl: $core-ouds-dimension-500;
$ouds-space-fixed-2xs: $core-ouds-dimension-50;
$ouds-space-fixed-3xl: $core-ouds-dimension-600;
$ouds-space-fixed-3xs: $core-ouds-dimension-out-of-system-50;
$ouds-space-fixed-4xl: $core-ouds-dimension-700;
$ouds-space-fixed-5xl: $core-ouds-dimension-800;
$ouds-space-fixed-lg: $core-ouds-dimension-300;
$ouds-space-fixed-md: $core-ouds-dimension-200;
$ouds-space-fixed-none: $core-ouds-dimension-0;
$ouds-space-fixed-sm: $core-ouds-dimension-150;
$ouds-space-fixed-xl: $core-ouds-dimension-400;
$ouds-space-fixed-xs: $core-ouds-dimension-100;
$ouds-space-column-gap-2xl: $ouds-dimension-3xs;
$ouds-space-column-gap-2xs: $ouds-dimension-10xs;
$ouds-space-column-gap-3xs: $ouds-dimension-11xs;
$ouds-space-column-gap-lg: $ouds-dimension-5xs;
$ouds-space-column-gap-md: $ouds-dimension-6xs;
$ouds-space-column-gap-none: $ouds-dimension-none;
$ouds-space-column-gap-sm: $ouds-dimension-8xs;
$ouds-space-column-gap-xl: $ouds-dimension-4xs;
$ouds-space-column-gap-xs: $ouds-dimension-9xs;
$ouds-space-inset-2xl: $ouds-dimension-xs;
$ouds-space-inset-2xs: $ouds-dimension-10xs;
$ouds-space-inset-3xl: $ouds-dimension-md;
$ouds-space-inset-3xs: $ouds-dimension-11xs;
$ouds-space-inset-4xs: $ouds-dimension-12xs;
$ouds-space-inset-lg: $ouds-dimension-5xs;
$ouds-space-inset-md: $ouds-dimension-6xs;
$ouds-space-inset-none: $ouds-dimension-none;
$ouds-space-inset-sm: $ouds-dimension-8xs;
$ouds-space-inset-xl: $ouds-dimension-3xs;
$ouds-space-inset-xs: $ouds-dimension-9xs;
$ouds-space-padding-block-2xl: $ouds-dimension-3xs;
$ouds-space-padding-block-2xs: $ouds-dimension-10xs;
$ouds-space-padding-block-3xl: $ouds-dimension-2xs;
$ouds-space-padding-block-3xs: $ouds-dimension-11xs;
$ouds-space-padding-block-4xl: $ouds-dimension-xs;
$ouds-space-padding-block-lg: $ouds-dimension-5xs;
$ouds-space-padding-block-md: $ouds-dimension-6xs;
$ouds-space-padding-block-none: $ouds-dimension-none;
$ouds-space-padding-block-sm: $ouds-dimension-8xs;
$ouds-space-padding-block-xl: $ouds-dimension-4xs;
$ouds-space-padding-block-xs: $ouds-dimension-9xs;
$ouds-space-padding-inline-2xl: $ouds-dimension-3xs;
$ouds-space-padding-inline-2xs: $ouds-dimension-9xs;
$ouds-space-padding-inline-3xl: $ouds-dimension-2xs;
$ouds-space-padding-inline-3xs: $ouds-dimension-10xs;
$ouds-space-padding-inline-4xl: $ouds-dimension-xs;
$ouds-space-padding-inline-4xs: $ouds-dimension-11xs;
$ouds-space-padding-inline-lg: $ouds-dimension-5xs;
$ouds-space-padding-inline-md: $ouds-dimension-6xs;
$ouds-space-padding-inline-none: $ouds-dimension-none;
$ouds-space-padding-inline-sm: $ouds-dimension-7xs;
$ouds-space-padding-inline-xl: $ouds-dimension-4xs;
$ouds-space-padding-inline-xs: $ouds-dimension-8xs;
$ouds-space-row-gap-2xs: $ouds-dimension-10xs;
$ouds-space-row-gap-3xs: $ouds-dimension-11xs;
$ouds-space-row-gap-lg: $ouds-dimension-5xs;
$ouds-space-row-gap-md: $ouds-dimension-6xs;
$ouds-space-row-gap-none: $ouds-dimension-none;
$ouds-space-row-gap-sm: $ouds-dimension-8xs;
$ouds-space-row-gap-xs: $ouds-dimension-9xs;
$ouds-space-scaled-2xl-desktop: $ouds-dimension-3xl;
$ouds-space-scaled-2xl-mobile: $ouds-dimension-md;
$ouds-space-scaled-2xl-tablet: $ouds-dimension-xl;
$ouds-space-scaled-2xs-desktop: $ouds-dimension-8xs;
$ouds-space-scaled-2xs-mobile: $ouds-dimension-10xs;
$ouds-space-scaled-2xs-tablet: $ouds-dimension-8xs;
$ouds-space-scaled-3xl-desktop: $ouds-dimension-5xl;
$ouds-space-scaled-3xl-mobile: $ouds-dimension-xl;
$ouds-space-scaled-3xl-tablet: $ouds-dimension-3xl;
$ouds-space-scaled-3xs-desktop: $ouds-dimension-10xs;
$ouds-space-scaled-3xs-mobile: $ouds-dimension-11xs;
$ouds-space-scaled-3xs-tablet: $ouds-dimension-10xs;
$ouds-space-scaled-lg-desktop: $ouds-dimension-md;
$ouds-space-scaled-lg-mobile: $ouds-dimension-3xs;
$ouds-space-scaled-lg-tablet: $ouds-dimension-xs;
$ouds-space-scaled-md-desktop: $ouds-dimension-xs;
$ouds-space-scaled-md-mobile: $ouds-dimension-5xs;
$ouds-space-scaled-md-tablet: $ouds-dimension-3xs;
$ouds-space-scaled-none-desktop: $ouds-dimension-none;
$ouds-space-scaled-none-mobile: $ouds-dimension-none;
$ouds-space-scaled-none-tablet: $ouds-dimension-none;
$ouds-space-scaled-sm-desktop: $ouds-dimension-3xs;
$ouds-space-scaled-sm-mobile: $ouds-dimension-6xs;
$ouds-space-scaled-sm-tablet: $ouds-dimension-5xs;
$ouds-space-scaled-xl-desktop: $ouds-dimension-xl;
$ouds-space-scaled-xl-mobile: $ouds-dimension-xs;
$ouds-space-scaled-xl-tablet: $ouds-dimension-md;
$ouds-space-scaled-xs-desktop: $ouds-dimension-5xs;
$ouds-space-scaled-xs-mobile: $ouds-dimension-8xs;
$ouds-space-scaled-xs-tablet: $ouds-dimension-6xs;

Sass variablesLink to this section: Sass variables

scss/_variables.scss

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .75, // OUDS mod: instead of `.5`
  3: $spacer * 1.5, // OUDS mod: instead of `1`
  4: $spacer * 2.5, // OUDS mod: instead of `1.5`
  5: $spacer * 3.5, // OUDS mod: instead of `3`
);

Sass mapsLink to this section: Sass maps

Spacing utilities are declared via Sass map and then generated with our utilities API.

scss/_maps.scss

$ouds-dimension-space-scaled: (
  "none": var(--#{$prefix}space-scaled-none),
  "3xs": var(--#{$prefix}space-scaled-3xs),
  "2xs": var(--#{$prefix}space-scaled-2xs),
  "xs": var(--#{$prefix}space-scaled-xs),
  "sm": var(--#{$prefix}space-scaled-sm),
  "md": var(--#{$prefix}space-scaled-md),
  "lg": var(--#{$prefix}space-scaled-lg),
  "xl": var(--#{$prefix}space-scaled-xl),
  "2xl": var(--#{$prefix}space-scaled-2xl),
  "3xl": var(--#{$prefix}space-scaled-3xl)
);

// stylelint-disable function-disallowed-list
$ouds-dimension-negative-space-scaled: (
  "n3xs": calc(-1 * var(--#{$prefix}space-scaled-3xs)),
  "n2xs": calc(-1 * var(--#{$prefix}space-scaled-2xs)),
  "nxs": calc(-1 * var(--#{$prefix}space-scaled-xs)),
  "nsm": calc(-1 * var(--#{$prefix}space-scaled-sm)),
  "nmd": calc(-1 * var(--#{$prefix}space-scaled-md)),
  "nlg": calc(-1 * var(--#{$prefix}space-scaled-lg)),
  "nxl": calc(-1 * var(--#{$prefix}space-scaled-xl)),
  "n2xl": calc(-1 * var(--#{$prefix}space-scaled-2xl)),
  "n3xl": calc(-1 * var(--#{$prefix}space-scaled-3xl))
);
// stylelint-enable function-disallowed-list

// scss-docs-start ouds-maps-dimension-fixed
$ouds-dimension-space-fixed: (
  "none": $ouds-space-fixed-none,
  "3xs": $ouds-space-fixed-3xs,
  "2xs": $ouds-space-fixed-2xs,
  "xs": $ouds-space-fixed-xs,
  "sm": $ouds-space-fixed-sm,
  "md": $ouds-space-fixed-md,
  "lg": $ouds-space-fixed-lg,
  "xl": $ouds-space-fixed-xl,
  "2xl": $ouds-space-fixed-2xl,
  "3xl": $ouds-space-fixed-3xl,
  "4xl": $ouds-space-fixed-4xl,
  "5xl": $ouds-space-fixed-5xl
);
// scss-docs-end ouds-maps-dimension-fixed

$ouds-dimension-negative-space-fixed: if($enable-negative-margins, negativify-map($ouds-dimension-space-fixed), null);

Sass utilities APILink to this section: Sass utilities API

Spacing utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss

// Scaled margin utilities
"margin-scaled-ouds": (
  property: margin,
  class: m-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-x-scaled-ouds": (
  property: margin-right margin-left,
  class: mx-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-y-scaled-ouds": (
  property: margin-top margin-bottom,
  class: my-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-top-scaled-ouds": (
  property: margin-top,
  class: mt-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-end-scaled-ouds": (
  property: margin-right,
  class: me-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-bottom-scaled-ouds": (
  property: margin-bottom,
  class: mb-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-start-scaled-ouds": (
  property: margin-left,
  class: ms-scaled,
  values: $ouds-dimension-space-scaled
),
// Negative scaled margin utilities
"negative-margin-scaled-ouds": (
  property: margin,
  class: m-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-x-scaled-ouds": (
  property: margin-right margin-left,
  class: mx-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-y-scaled-ouds": (
  property: margin-top margin-bottom,
  class: my-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-top-scaled-ouds": (
  property: margin-top,
  class: mt-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-end-scaled-ouds": (
  property: margin-right,
  class: me-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-bottom-scaled-ouds": (
  property: margin-bottom,
  class: mb-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-start-scaled-ouds": (
  property: margin-left,
  class: ms-scaled,
  values: $ouds-dimension-negative-space-scaled
),
// Fixed margin utilities
"margin-ouds": (
  responsive: true,
  property: margin,
  class: m,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-x-ouds": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-y-ouds": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-top-ouds": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-end-ouds": (
  responsive: true,
  property: margin-right,
  class: me,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-bottom-ouds": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-start-ouds": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
// Negative fixed margin utilities
"negative-margin-ouds": (
  responsive: true,
  property: margin,
  class: m,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-x-ouds": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-y-ouds": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-top-ouds": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-end-ouds": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-bottom-ouds": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-start-ouds": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $ouds-dimension-negative-space-fixed
),
// Padding utilities
"padding-scaled-ouds": (
  property: padding,
  class: p-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-x-scaled-ouds": (
  property: padding-right padding-left,
  class: px-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-y-scaled-ouds": (
  property: padding-top padding-bottom,
  class: py-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-top-scaled-ouds": (
  property: padding-top,
  class: pt-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-end-scaled-ouds": (
  property: padding-right,
  class: pe-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-bottom-scaled-ouds": (
  property: padding-bottom,
  class: pb-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-start-scaled-ouds": (
  property: padding-left,
  class: ps-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-ouds": (
  responsive: true,
  property: padding,
  class: p,
  values: $ouds-dimension-space-fixed
),
"padding-x-ouds": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $ouds-dimension-space-fixed
),
"padding-y-ouds": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $ouds-dimension-space-fixed
),
"padding-top-ouds": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $ouds-dimension-space-fixed
),
"padding-end-ouds": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $ouds-dimension-space-fixed
),
"padding-bottom-ouds": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $ouds-dimension-space-fixed
),
"padding-start-ouds": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $ouds-dimension-space-fixed
),
// Gap utility
"gap-scaled-ouds": (
  property: gap,
  class: gap-scaled,
  values: $ouds-dimension-space-scaled
),
"row-gap-scaled-ouds": (
  property: row-gap,
  class: row-gap-scaled,
  values: $ouds-dimension-space-scaled
),
"column-gap-scaled-ouds": (
  property: column-gap,
  class: column-gap-scaled,
  values: $ouds-dimension-space-scaled
),
"gap-ouds": (
  responsive: true,
  property: gap,
  class: gap,
  values: $ouds-dimension-space-fixed
),
"row-gap-ouds": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $ouds-dimension-space-fixed
),
"column-gap-ouds": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $ouds-dimension-space-fixed
),

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

scss/_utilities.scss

// Margin utilities
"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-ouds`
  bootstrap-compatibility: true
),
"margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-x-ouds`
  bootstrap-compatibility: true
),
"margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-y-ouds`
  bootstrap-compatibility: true
),
"margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-top-ouds`
  bootstrap-compatibility: true
),
"margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-end-ouds`
  bootstrap-compatibility: true
),
"margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-bottom-ouds`
  bootstrap-compatibility: true
),
"margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-start-ouds`
  bootstrap-compatibility: true
),
// Negative margin utilities
"negative-margin": (
  responsive: true,
  property: margin,
  class: m,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
// Padding utilities
"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-x": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-y": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-top": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-end": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-bottom": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-start": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $spacers,
  bootstrap-compatibility: true
),
// Gap utility
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers,
  bootstrap-compatibility: true
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers,
  bootstrap-compatibility: true
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers,
  bootstrap-compatibility: true
),
// scss-docs-end utils-spacing
// OUDS mod
// scss-docs-start utils-spacing-ouds
// Scaled margin utilities
"margin-scaled-ouds": (
  property: margin,
  class: m-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-x-scaled-ouds": (
  property: margin-right margin-left,
  class: mx-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-y-scaled-ouds": (
  property: margin-top margin-bottom,
  class: my-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-top-scaled-ouds": (
  property: margin-top,
  class: mt-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-end-scaled-ouds": (
  property: margin-right,
  class: me-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-bottom-scaled-ouds": (
  property: margin-bottom,
  class: mb-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-start-scaled-ouds": (
  property: margin-left,
  class: ms-scaled,
  values: $ouds-dimension-space-scaled
),
// Negative scaled margin utilities
"negative-margin-scaled-ouds": (
  property: margin,
  class: m-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-x-scaled-ouds": (
  property: margin-right margin-left,
  class: mx-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-y-scaled-ouds": (
  property: margin-top margin-bottom,
  class: my-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-top-scaled-ouds": (
  property: margin-top,
  class: mt-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-end-scaled-ouds": (
  property: margin-right,
  class: me-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-bottom-scaled-ouds": (
  property: margin-bottom,
  class: mb-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-start-scaled-ouds": (
  property: margin-left,
  class: ms-scaled,
  values: $ouds-dimension-negative-space-scaled
),
// Fixed margin utilities
"margin-ouds": (
  responsive: true,
  property: margin,
  class: m,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-x-ouds": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-y-ouds": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-top-ouds": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-end-ouds": (
  responsive: true,
  property: margin-right,
  class: me,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-bottom-ouds": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-start-ouds": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
// Negative fixed margin utilities
"negative-margin-ouds": (
  responsive: true,
  property: margin,
  class: m,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-x-ouds": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-y-ouds": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-top-ouds": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-end-ouds": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-bottom-ouds": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-start-ouds": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $ouds-dimension-negative-space-fixed
),
// Padding utilities
"padding-scaled-ouds": (
  property: padding,
  class: p-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-x-scaled-ouds": (
  property: padding-right padding-left,
  class: px-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-y-scaled-ouds": (
  property: padding-top padding-bottom,
  class: py-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-top-scaled-ouds": (
  property: padding-top,
  class: pt-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-end-scaled-ouds": (
  property: padding-right,
  class: pe-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-bottom-scaled-ouds": (
  property: padding-bottom,
  class: pb-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-start-scaled-ouds": (
  property: padding-left,
  class: ps-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-ouds": (
  responsive: true,
  property: padding,
  class: p,
  values: $ouds-dimension-space-fixed
),
"padding-x-ouds": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $ouds-dimension-space-fixed
),
"padding-y-ouds": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $ouds-dimension-space-fixed
),
"padding-top-ouds": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $ouds-dimension-space-fixed
),
"padding-end-ouds": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $ouds-dimension-space-fixed
),
"padding-bottom-ouds": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $ouds-dimension-space-fixed
),
"padding-start-ouds": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $ouds-dimension-space-fixed
),
// Gap utility
"gap-scaled-ouds": (
  property: gap,
  class: gap-scaled,
  values: $ouds-dimension-space-scaled
),
"row-gap-scaled-ouds": (
  property: row-gap,
  class: row-gap-scaled,
  values: $ouds-dimension-space-scaled
),
"column-gap-scaled-ouds": (
  property: column-gap,
  class: column-gap-scaled,
  values: $ouds-dimension-space-scaled
),
"gap-ouds": (
  responsive: true,
  property: gap,
  class: gap,
  values: $ouds-dimension-space-fixed
),
"row-gap-ouds": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $ouds-dimension-space-fixed
),
"column-gap-ouds": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $ouds-dimension-space-fixed
),

Spacing

On this page On this page

Margin and paddingLink to this section: Margin and padding

Notation for fixed valuesLink to this section: Notation for fixed values

Notation for scaled valuesLink to this section: Notation for scaled values

ExamplesLink to this section: Examples

Horizontal centeringLink to this section: Horizontal centering

Negative marginLink to this section: Negative margin

GapLink to this section: Gap

row-gapLink to this section: row-gap

column-gapLink to this section: column-gap

Scaled gapLink to this section: Scaled gap

CSSLink to this section: CSS

VariablesLink to this section: Variables

Sass tokensLink to this section: Sass tokens

Semantic tokensLink to this section: Semantic tokens

Sass variablesLink to this section: Sass variables

Sass mapsLink to this section: Sass maps

Sass utilities APILink to this section: Sass utilities API

On this page