Padding & Margin Utilities

zenCSS provides a range of utility classes to control the padding and margin of elements. These utilities offer a consistent spacing system to help maintain a well-structured and visually balanced layout.

Padding Utilities

Class Name	Description	Example
.p-0	No padding	Example
.p-1	Padding of 0.25rem around the element	Example
.p-2	Padding of 0.5rem around the element	Example
.p-3	Padding of 0.75rem around the element	Example
.p-4	Padding of 1rem around the element	Example
.p-5	Padding of 1.25rem around the element	Example
.p-6	Padding of 2em around the element	Example
.p-7	Padding of 3em around the element	Example

Margin Utilities

Class Name	Description	Example
.m-0	No margin	Example
.m-1	Margin of 0.25rem around the element	Example
.m-2	Margin of 0.5rem around the element	Example
.m-3	Margin of 0.75rem around the element	Example
.m-4	Margin of 1rem around the element	Example
.m-5	Margin of 1.25rem around the element	Example
.m-6	Margin of 2em around the element	Example
.m-7	Margin of 3em around the element	Example

Specific Side Padding and Margin

Class Name	Description	Example
.mt-0	No top margin	Example
.mt-1	Top margin of 0.25em	Example
.mt-2	Top margin of 0.5em	Example
.mt-3	Top margin of 0.75em	Example
.mt-4	Top margin of 1em	Example
.mt-5	Top margin of 1.25em	Example
.mb-0	No bottom margin	Example
.mb-1	Bottom margin of 0.25em	Example
.mb-2	Bottom margin of 0.5em	Example
.mb-3	Bottom margin of 0.75em	Example
.mb-4	Bottom margin of 1em	Example
.mb-5	Bottom margin of 1.25em	Example
.ml-0	No left margin	Example
.ml-1	Left margin of 0.25em	Example
.ml-2	Left margin of 0.5em	Example
.ml-3	Left margin of 0.75em	Example
.ml-4	Left margin of 1em	Example
.ml-5	Left margin of 1.25em	Example
.mr-0	No right margin	Example
.mr-1	Right margin of 0.25em	Example
.mr-2	Right margin of 0.5em	Example
.mr-3	Right margin of 0.75em	Example
.mr-4	Right margin of 1em	Example
.mr-5	Right margin of 1.25em	Example
.pt-0	No top padding	Example
.pt-1	Top padding of 0.25em	Example
.pt-2	Top padding of 0.5em	Example
.pt-3	Top padding of 0.75em	Example
.pt-4	Top padding of 1em	Example
.pt-5	Top padding of 1.25em	Example
.pb-0	No bottom padding	Example
.pb-1	Bottom padding of 0.25em	Example
.pb-2	Bottom padding of 0.5em	Example
.pb-3	Bottom padding of 0.75em	Example
.pb-4	Bottom padding of 1em	Example
.pb-5	Bottom padding of 1.25em	Example
.pl-0	No left padding	Example
.pl-1	Left padding of 0.25em	Example
.pl-2	Left padding of 0.5em	Example
.pl-3	Left padding of 0.75em	Example
.pl-4	Left padding of 1em	Example
.pl-5	Left padding of 1.25em	Example
.pr-0	No right padding	Example
.pr-1	Right padding of 0.25em	Example
.pr-2	Right padding of 0.5em	Example
.pr-3	Right padding of 0.75em	Example
.pr-4	Right padding of 1em	Example
.pr-5	Right padding of 1.25em	Example

Extended Padding and Margin Classes

Class Name	Description	Example
.p-6	Applies 2em padding around an element.	Example
.m-6	Applies 2em margin around an element.	Example
.p-7	Applies 3em padding around an element.	Example
.m-7	Applies 3em margin around an element.	Example

Squeeze Class

The .squeeze class can be applied to reduce the margin top/bottom of immediate children. Can be combined with the .gap classes to control spacing between elements. Useful for columns.

Usage Examples

Here are some examples showcasing how you might use these utilities in your HTML:

<!-- Example 1: Apply padding around an element -->
<div class="p-3">
    This element has a padding of 0.75rem around all sides.
</div>

<!-- Example 2: Apply margin to the top and bottom of an element -->
<div class="mt-2 mb-2">
    This element has a margin of 0.5em at the top and bottom.
</div>