Spacing Classes

Spacing classes are the most useful & quick utility classes to kick start.

Spacing system

Padding classes:

  1. Our padding classes starts with p followed by an hyphen and then the number. Number is the multiplier of 4. So p-1 is padding: 4px.

  2. And you can use pt followed by an hyphen and the number for padding-top, same way, pb is padding-bottom pr is padding-right and pl is padding-left.

  3. Along with these classes, we do have two more types of classes for padding. They are px and py. px equals to padding-left & padding-right. py equals to padding-top & padding-bottom. Here x is x-axis, which is horizontal. y is y-axis, which is vertical.

Margin classes:

  1. Same way, our margin classes starts with m. But we provide margin-right and margin-bottom classes only. These two margin categories are enough for most of the times. This limitation is to reduce the unused css bloat.
← Hover Classes
Grid Classes →