Spacing

The spacing utility provides styles to alter the spacing (margins and padding) of the element they're applied to.

Structure

All spacing utility classes share the .cwf-$--& and .cwf-$__%--& structure, where:

1. $ is either the margin or padding property, indicating which property will be modified.
2. % is one of the following directions: left, top, right, or bottom. This indicates the side/direction of the property that will be modified.
3. & is one of the following spacing keywords: auto, zero, third, half, full, or double. This indicated the amount of modificating to the specificed property (and optional direction). The auto keyword cannot be used in conjunction with the padding property. When used with the margin property, the spacing keyword can be prefixed with --negative to get the negative value of the spacing amount; This cannot be used in conjunction with the auto or zero spacing keywords.

Spacings

The following are the spacing keywords and their respectively values:

1. auto: auto
2. zero: 0
3. third: 1rem ÷ 3, or 0.3333333333rem
4. half: 1rem ÷ 2, or 0.5rem
5. full: 1rem
6. double: 1rem * 2, or 2rem

Examples

Margin

I'm a paragraph with a double bottom margin (.cwf-margin__bottom--double).

I'm a paragraph with a third bottom margin (.cwf-margin__bottom--third).

I'm a regular paragraph.

Padding

I'm a paragraph with full padding (.cwf-padding--full).

I'm a paragraph with double left padding (.cwf-padding__left--double).

I'm a regular paragraph.