Spacing children

This utility is used to space to consecutive children of a parent either vertically or horizontally. Many browser primitives and components include bottom (or other) margin by default.

In order to mitigate instances of undesired margin (especially in the case of nested components) the .space-* utility classes help with this. This article is helpful background reading: Margin considered harmful.

Example

Vertical

Item 1

Item 2

Item 3

Item 4

<div class="space-y space-y-6">
  <div>…</div>
  <div>…</div>
  <div>…</div>
  <div>…</div>
</div>

Horizontal

Item 1

Item 2

Item 3

Item 4

<div class="d-flex space-x space-x-2">
  <span>…</span>
  <span>…</span>
  <span>…</span>
  <span>…</span>
</div>

Container classes

To effect spacing of children relative to the parent, apply either .space-y (inline margin) or .space-x (block margin) to the parent container. Possible spacing values adhere to the utility spacing scale and are expressed in suffix values of 1-10.

X or Y

Class	Description	Copy
`space-y`	Zeros out bottom margin for all children
`space-x`	Zeros out left margin for all children

Additive Y classes

Class	REM	PX	Token
`space-y-1`	0.125rem	2px	`—units-25`
`space-y-2`	0.25rem	4px	`—units-50`
`space-y-3`	0.375rem	6px	`—units-75`
`space-y-4`	0.5rem	8px	`—units-100`
`space-y-5`	0.75rem	12px	`—units-150`
`space-y-6`	1rem	16px	`—units-200`
`space-y-7`	1.25rem	20px	`—units-250`
`space-y-8`	1.5rem	24px	`—units-300`
`space-y-9`	2rem	32px	`—units-400`
`space-y-10`	2.5rem	40px	`—units-500`

Additive X classes

Class	REM	PX	Token
`space-x-1`	0.125rem	2px	`—units-25`
`space-x-2`	0.25rem	4px	`—units-50`
`space-x-3`	0.375rem	6px	`—units-75`
`space-x-4`	0.5rem	8px	`—units-100`
`space-x-5`	0.75rem	12px	`—units-150`
`space-x-6`	1rem	16px	`—units-200`
`space-x-7`	1.25rem	20px	`—units-250`
`space-x-8`	1.5rem	24px	`—units-300`
`space-x-9`	2rem	32px	`—units-400`
`space-x-10`	2.5rem	40px	`—units-500`