Box is a flexible div wrapper. It can customize margin, padding, and basic properties of components they wrap.


The easiest way to use the Box component is to wrap it around the target element.

We're now in control of the appearance and orientation of child component. One common usecase is to improve the spacing around the child element.

Here's a similar example with padding around the component.

All units of spacing on the Box component are interpreted in em.

Precedence of margin & padding

Let's take margin for example. You can set margin on a Box element by using any of the following...

  1. m - all four sides
  2. mh & mv - margin horizontal and margin vertical
  3. mt, mr, mb & ml- margin top, right, bottom and left

The more specific the margin is, the higher precedence it has. In the above case, margin declarations in the no. 3 category will override every other margin declaration.

Full width

We can specify a Box to be full width by setting the block prop to true. Here's an example


mtsets the top marginnumber-
mbsets the bottom marginnumber-
mrsets the right marginnumber-
mlsets the left marginnumber-
mhsets the horizontal marginnumber-
mvsets the vertical marginnumber-
msets the margin on all sidesnumber-
ptsets the top paddingnumber-
pbsets the bottom paddingnumber-
prsets the right paddingnumber-
plsets the left paddingnumber-
phsets the horizontal paddingnumber-
pvsets the vertical paddingnumber-
psets the padding on all sidesnumber-