Spacing

Spacing can be applied using either margin or padding props. Both margin and padding share the same predefined scale.

Individual scales can be used too using marginLeft, marginRight, marginTop, marginBottom, paddingLeft, paddingRight, paddingTop, paddingBottom.

All above properties also have shorthands that are widely used for example marginLeft can be written as ml. padding can be be written as p.

Examples

<Box mt={3} width={100} height={100} />
<Box mt={6} width={100} height={100} />
<Box mt={8} width={100} height={100} />

Props

See Box for all the available properties.