Padding - Lightning Design System

Adjust whitespace with horizontal and vertical spacing helpers

Padding: Top

Spacing indicates margin and padding. The base unit of all our spacing metrics is 4.

Most components already come with spacing included. These utility classes are for added convenience in laying out components.
Classes prefixed in slds-p- are used for adding padding. Classes prefixed by slds-m- are used for adding margins.
The directions available for the spacing classes are top, right, bottom, and left.
You can use the vertical shortcut for both top and bottom, horizontal for both right and left, and around for all sides.
Use the _xxx-small through _xx-large scale to choose the size needed.
Where vertical centering is required, check out our centered media object instead of applying extra margin or padding.

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-p-_xxx-small, .slds-var-p-_xxx-small`
Summary	Adds .125rem padding to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-p-_xx-small, .slds-var-p-_xx-small`
Summary	Adds .25rem padding to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-p-_x-small, .slds-var-p-_x-small`
Summary	Adds .5rem padding to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-p-_small, .slds-var-p-_small`
Summary	Adds .75rem padding to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-p-_medium, .slds-var-p-_medium`
Summary	Adds 1rem padding to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-p-_large, .slds-var-p-_large`
Summary	Adds 1.5rem padding to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-p-_x-large, .slds-var-p-_x-large`
Summary	Adds 2rem padding to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-p-_xx-large, .slds-var-p-_xx-large`
Summary	Adds 3rem padding to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-p--vertical_, .slds-var-p--vertical_`
Summary	Adds the specified padding to both top and bottom
Restrict	`*`
Modifier	True

Selector	`.slds-p--horizontal_, .slds-var-p--horizontal_`
Summary	Adds the specified padding to both sides
Restrict	`*`
Modifier	True

Selector	`.slds-p--around_, .slds-var-p--around_`
Summary	Adds the specified padding all the way around the element
Restrict	`*`
Modifier	True