Spacing playground¶

This page brings margin, padding, border, and border radius together on a single element, so you can see how they shape the box at the same time.

Change any value and watch the preview. Each field has its own unit dropdown, and the link button on a control changes every side at once. For what each control means on its own, see Spacing and layout.

Related notes¶

Each control here works the same as on the Spacing and layout page, where every property is explained on its own. For the space between separate items, see the Gap section there.