Skip to main content

Padding and Margin

The .p-0 to .p-4 and .m-0 to .m-4 classes apply padding and margin, respectively, with sizes ranging from 0 (none) to extra-large (as defined by the --xl CSS variable). Similar classes are provided for padding and margin on individual sides of an element, like `....

Margins and Paddings The framework uses scale from 0 to 4 for both margin (m) and padding (p) classes with top (t), right (r), bottom (b), left (l) modifiers. Each step in the scale corresponds to the size variables --sm, --md, --lg, --xl. For example,

  • .m-1: Applies a margin of 0.5rem to all sides.
  • .p-3: Applies a padding of 2rem to all sides.
  • .m-t-2: Applies a margin-top of 1rem.