Skip to content

Margin

Margin is used to add space around content.

Overview

Margin is a primitive layout component that is highly reusable. It allows the spacing to layout using the theme space tokens without the need to alter the style of other components.

Margin is not available in Figma.

Usage

Variations

Responsive Margin

Margins can be responsive by passing an array value. The first value will be the default, the second from the smallAndUp breakpoint, the third from the mediumAndUp breakpoint, and so on.

Properties

NameValuesDefault

topArray values are responsive and will change based on breakpoint

123456789101112Array<1,2,3,4,5,6,7,8,9,10,11,12>

bottomArray values are responsive and will change based on breakpoint

123456789101112Array<1,2,3,4,5,6,7,8,9,10,11,12>

leftArray values are responsive and will change based on breakpoint

123456789101112Array<1,2,3,4,5,6,7,8,9,10,11,12>

rightArray values are responsive and will change based on breakpoint

123456789101112Array<1,2,3,4,5,6,7,8,9,10,11,12>

verticalSets top and bottom margin. Array values are responsive and will change based on breakpoint

123456789101112Array<1,2,3,4,5,6,7,8,9,10,11,12>

horizontalSets left and right margin. Array values are responsive and will change based on breakpoint

123456789101112Array<1,2,3,4,5,6,7,8,9,10,11,12>

allSets top, bottom, left, and right margin. Array values are responsive and will change based on breakpoint

123456789101112Array<1,2,3,4,5,6,7,8,9,10,11,12>

inlineWeb only, makes the component use inline-block

boolean

...

JSX.IntrinsicElements["div"]