Margin

Some of our components expose a simple way to modify their margin. The following example showcases the simples way to use the margin prop by giving it a Spacing value.

Edit the code below to see your changes live!

You can also specify margins with an object to handle different margins with different breakpoints. All values must be of Spacing type.

Edit the code below to see your changes live!

API

Margin

Prop Name
Type
Default
Description
marginMargin

Determines the margin to be applied.

marginTopMargin

Determines the top margin to be applied.

marginRightMargin

Determines the right margin to be applied.

marginBottomMargin

Determines the bottom margin to be applied.

marginLeftMargin

Determines the left margin to be applied.

marginVerticalMargin

Determines the top and bottom margin to be applied.

marginHorizontalMargin

Determines the left and right margin to be applied.

Props ending with * are required

Beta