Padding

Padding around elements is based off of multiples and fractions of 24px. This value is used for line height, sizing, padding, margins on objects, etc. Many components expose padding via a pad property.

Components like Box, Header, Footer, Form, Sidebar, and Menu use pad stops as illustrated below.

The pad attribute can be set tosmall, medium, large, or an object which just affects the padding of components horizontally or vertically, or in-between multiple components: { horizontal: none|small|medium|large, vertical: none|small|medium|large }. Padding set using between only affects components based on the direction set (adds horizontal padding between components for row, or vertical padding between components for column).