We have created a reusable library of responsive margin CSS classes that we can apply to each module.

1. Formula

CSS class formula: m{t|r|b|l|x|y}-{size}

Side

First, we need to decide which sides to add a margin. 

Each margin class can be applied to 7 possible sides:

• m = margin all sides
• mt = margin top
• mb = margin bottom
• ml = margin left
• mr = margin right
• mx = margin left and right
• my = margin top and bottom

Size

Margin sizes are in rem and are relative to the base font size. Calculation examples:

If the base font size of 16px:

• 1rem equals 16px
• 0.5rem equals 8px
• 2rem equals 32px
• 3rem equals 48px

Available sizes:

2. Examples

Add margin to a single side

CSS class formula: m{t|r|b|l}-{size}

Add horizontal margin

CSS class formula: mx-{size}

Add vertical margin

CSS class formula: my-{size}

Add margin to all sides

CSS class formula: m-{size}

3. Responsive

Pre-built margin CSS classes also come with responsive breakpoints. This means we can assign custom margin(s) on mobile, tablet, and desktop.

To activate a specific breakpoint, add the following prefix in front of the margin CSS class you've chosen:

• mb:  for mobile
• tb:     for tablet
• ds:    for desktop

Examples:

• mb:mt-4 ds:mt-8
  Assigns margin-top of 1rem on mobile and 2rem on desktop
• m-4 mb:m-2
  Assigns a margin (all sides) of 1rem in all breakpoints, but turn into 0.5rem on mobile
• mt-4 tb:mt-8 ds:mt-12
  Assigns a margin-top of 1rem in all breakpoints, 2rem in tablet, and 3rem in desktop. 

4. Negative Margin

Modern web designs often involve overlapping modules that span over multiple sections. 

To replicate the effect, we can use negative margins by adding a hyphen prefix.

Examples:

• -mt-4
  Assigns negative margin-top of 1rem
• -mb-8
  Assigns negative margin-bottom of 2rem
• -mt-4 tb:-mt-8 ds:-mt-12
  Assigns a negative margin-top of 1rem in all breakpoints, 2rem in tablet, and 3rem in desktop. 

5. Usage

Add your own margin CSS classes into the Custom Classes field that's available in each Hatch module.

Source: Images are from Tailwind