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(--psLayoutSpacingLarge);
}

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(--psLayoutSpacingLarge);
}