Spacing Utilities

Width and Height Utilities

Width and height utilities control the dimensions of elements.

Width Utilities

Width 100%

<div class="w-100">
Width 100%
</div>

Width 75%

<div class="w-75">
Width 75%
</div>

Width 50%

<div class="w-50">
Width 50%
</div>

Width 25%

<div class="w-25">
Width 25%
</div>

Height Utilities

Height 100%

<div class="h-100">
Height 100%
</div>

Height 75%

<div class="h-75">
Height 75%
</div>

Height 50%

<div class="h-50">
Height 50%
</div>

Height 25%

<div class="h-25">
Height 25%
</div>

Consistent spacing units used throughout the system.

Spacing

Spacing utilities control margin and padding for elements.

--spacing-1 (4px)

--spacing-2 (8px)

--spacing-3 (16px)

--spacing-4 (24px)

--spacing-5 (32px)

Margin Utilities

Margin 1

<div class="m-1 p-3">
	Margin 1
</div>

Margin 3

<div class="m-3 p-3">
	Margin 3
</div>

Padding Utilities

Padding 1

<div class="p-1 m-3">
	Padding 1
</div>

Padding 3

<div class="p-3 m-3">
	Padding 3
</div>

Spacing Variables Reference

/* variables.css - Design Tokens */
:root {
	--spacing-unit: 0.25rem;
	--spacing-1: calc(var(--spacing-unit) * 1);
	--spacing-2: calc(var(--spacing-unit) * 2);
	--spacing-3: calc(var(--spacing-unit) * 4);
	--spacing-4: calc(var(--spacing-unit) * 6);
	--spacing-5: calc(var(--spacing-unit) * 8);
}