Space

Add horizontal or vertical spacing from theme
Import

Usage

Use Space component to add horizontal or vertical spacing between elements:

First line
Second line
H
<Text>First line</Text>
<Space h="md" />
<Text>Second line</Text>
First part
Second part
W
<Text>First line</Text>
<Space w="md" />
<Text>Second line</Text>

Where to use

In most cases you would want to use margin props instead of Space when working with Mantine components:

<Text>First line</Text>
// <Space h="md" /> is not required as the same can be achieved with margin
<Text mt="md">Second line</Text>

But when you work with regular html elements you do not have access to theme.spacing and you may want to use Space component in order to skip direct theme subscription:

<div>First line</div>
<Space h="md" />
// Margin props are not available on div, use Space to add spacing from theme
<div>Second line</div>

h and w props

h and w are shortcuts for height and width, you can use values from theme.spacing (xs, sm, md, lg, xl) or number to set width or height in px:

// Height will be set from theme.spacing.md
<Space h="md" />
// Width will be set to 30px
<Space w={30} />

TypeScript

Import component props type:

import type { SpaceProps } from '@mantine/core';

SpaceProps extends React.ComponentPropsWithoutRef<'div'>, all other props are available under Component props tab.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback