Padding - pressden/emma GitHub Wiki

Padding is the amount of space added to the inside of an element. You can generally think of it as the space separating the interior edges of an element from items contained within that element. https://media.prod.mdn.mozit.cloud/attachments/2019/03/19/16558/29c6fe062e42a327fb549a081bc56632/box-model.png

Padding can be set to 6 different sizes, and padding on all 4 sides of an object can be set independently.

Padding classes follow the following format: [location]-[size]

Location

• p-[size] - assign padding on all sides
• py-[size] - assign padding on top and bottom
• px-[size] - assign padding on left and right
• pt-[size] - assign padding on top
• pb-[size] - assign padding on bottom
• pl-[size] - assign padding on left
• pr-[size] - assign padding on right

Size

• [location]-0 - assign zero padding
• [location]-xs - assign extra small padding (4px)
• [location]-sm - assign small padding (8px)
• [location]-md - assign medium padding (16px)
• [location]-lg - assign large padding (32px)
• [location]-xl - assign extra large padding (64px)

Examples

• p-lg - provides a large padding around all 4 sides of an element
• pb-0 - removes any padding from the bottom of an element
• py-md - provides a medium padding to the top and bottom of an element
• pt-lg pb-0 - provides a large padding to the top, and removes any padding from the bottom of an element