Spacing

Utilities for custom mobile email spacing

Acorn includes padding-based responsive utility classes for fine-tuned control over spacing on mobile. Following Bootstrap 4 naming conventions, the classes are named using the format p{sides}-sm-{size}:

p stands for 'padding', use as-is.

{sides} is one of:

  • t - for classes that set padding-top
  • r - for classes that set padding-right
  • b - for classes that set padding-bottom
  • l - for classes that set padding-left
  • x - for classes that set both padding-left and padding-right
  • y - for classes that set both padding-top and padding-bottom
  • blank - for classes that set padding on all 4 sides of the element

{size} is one of:

  • 0 - for classes that eliminate padding by setting it to 0
  • 8 - for classes that set padding to one fourth of container apparent padding (8px default)
  • 16 - for classes that set padding equal to half of container apparent padding (16px default)
Tip: you will almost never need all these classes in your production emails. Remove any classes that you don't use either manually, or with the help of a tool like emailcomb.com ↗
ThemeMountain

Current Version