Padding

Basic usage

Add padding to a single side

Control the padding on one side of an element using the p{t|r|b|l}-{size} utilities.

For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.

<div className="**pt-6** ...">pt-6</div>
<div className="**pr-4** ...">pr-4</div>
<div className="**pb-8** ...">pb-8</div>
<div className="**pl-2** ...">pl-2</div>

Add horizontal padding

Control the horizontal padding of an element using the px-{size} utilities.

<div className="**px-8** ...">px-8</div>

Add vertical padding

Control the vertical padding of an element using the py-{size} utilities.

<div className="**py-8** ...">py-8</div>

Add padding to all sides

Control the padding on all sides of an element using the p-{size} utilities.

<div className="**p-8** ...">p-8</div>