Spacing

Spacing increments

Spacing can be applied using margin or padding. There are 7 available spacing sizes. Both margin and padding share the same predefined scale.

4px - XX-Small

psLayoutSpacingXXSmall

8px - X-Small

psLayoutSpacingXSmall

12px - Small

psLayoutSpacingSmall

16px - Medium

psLayoutSpacingMedium

24px - Large

psLayoutSpacingLarge

48px - X-Large

psLayoutSpacingXLarge

64px - XX-Large

psLayoutSpacingXXLarge

Apply spacing with CSS variables:

@import '@pluralsight/ps-design-system-core';

.mySelector {
  margin-top: var(--ps-layout-spacing-large);
}

Individual spacing

Individual spacing can be applied to a single side of an element. Both margin and padding share the same predefined scale. The same 7 sizes are available.

Apply spacing more specifically with CSS variables:

@import '@pluralsight/ps-design-system-core';

.mySelector {
  margin-top: var(--ps-layout-spacing-large);
}