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
xs
sm
md
lg
xl
import { Text, Space } from '@mantine/core';
function Demo() {
return (
<>
<Text>First line</Text>
<Space h="md" />
<Text>Second line</Text>
</>
);
}

First part
Second part
W
xs
sm
md
lg
xl
import { Text, Space } from '@mantine/core';
function Demo() {
return (
<div style={{ display: 'flex' }}>
<Text>First line</Text>
<Space w="md" />
<Text>Second line</Text>
</div>
);
}

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 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} />
Download more icon variants from https://tabler-icons.io/i/search

Space component props

Nothing found