Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

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
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
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:

import { Space, Text } from '@mantine/core';

// Space is not required as the same can be achieved with `mt` prop
function Demo() {
  return (
    <>
      <Text>First line</Text>
      <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:

import { Space } from '@mantine/core';

// Margin props are not available on div,
// use Space to add spacing from theme
function Demo() {
  return (
    <>
      <div>First line</div>
      <Space h="md" />
      <div>Second line</div>
    </>
  );
}

Previous

SimpleGrid

Next

Stack

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogGitHub Releases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIHelp CenterGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people