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
| Name | Values | Default |
|---|---|---|
topArray values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
bottomArray values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
leftArray values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
rightArray values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
verticalSets top and bottom margin. Array values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
horizontalSets left and right margin. Array values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
allSets top, bottom, left, and right margin. Array values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
inlineMakes the component use inline-block | boolean | |
... | JSX.IntrinsicElements["div"] |