Space

Add horizontal or vertical spacing from theme
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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>
Go back
SimpleGrid – @mantine/core
Up next
Stack – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter