p

<div layout="p:3">...</div>

The p utility allows you to set padding on an element.

You can use the following utilities to apply different padding values:

• p: sets the padding on all sides of the element.
• px: sets the padding for left and right sides.
• py: sets the padding for top and bottom sides.
• pl: sets the padding for the left side.
• pr: sets the padding for the right side.
• pt: sets the padding for the top side.
• pb: sets the padding for the bottom side.

You can specify any valid CSS unit for the padding value. If no unit is provided, a default harmonic value will be applied.

Give it a try!

p-child

To apply padding to all child elements, use the p-child utility.

Here are the available utilities to set padding on child elements:

• p-child: sets the padding property for child elements.
• px-child: sets the padding-left and padding-right properties for child elements.
• py-child: sets the padding-top and padding-bottom properties for child elements.
• pl-child: sets the padding-left property for child elements.
• pr-child: sets the padding-right property for child elements.
• pt-child: sets the padding-top property for child elements.
• pb-child: sets the padding-bottom property for child elements.

p-recursive

To apply padding to all descendant elements (not just direct children), use the p-recursive utility.

Here are the available utilities to set padding on descendant elements:

• p-recursive: sets the padding for all descendant elements.
• px-recursive: sets the padding-left and padding-right properties for all descendant elements.
• py-recursive: sets the padding-top and padding-bottom properties for all descendant elements.
• pl-recursive: sets the padding-left property for all descendant elements.
• pr-recursive: sets the padding-right property for all descendant elements.
• pt-recursive: sets the padding-top property for all descendant elements.
• pb-recursive: sets the padding-bottom property for all descendant elements.