Understanding Inner Padding & Outer Margin Settings

Learn how to control section spacing using Inner padding, Outer margin, and custom CSS for more precise control.

Basic Settings

Inner Padding

• Controls space inside the section

• Affects distance between content and section edges

• Single value applies to both top and bottom

Outer Margin

• Controls space outside the section

• Affects distance between sections

• Single value applies to both top and bottom

Using Custom CSS

Inner Padding Custom CSS

To set different values for top and bottom padding:

/* CSS field */
.dsgn-pck__sizer {
  padding-top: 60px;
  padding-bottom: 40px;
}

/* Mobile CSS field */
.dsgn-pck__sizer {
  padding-top: 40px;
  padding-bottom: 20px;
}

Outer Margin Custom CSS

To set different values for top and bottom margin:

/* CSS field */
{
  margin-top: 80px;
  margin-bottom: 40px;
}

/* Mobile CSS field */
{
  margin-top: 40px;
  margin-bottom: 20px;
}

Tips for Spacing

Desktop Values

Hero sections:
- Inner padding: 60-100px
- Outer margin: 0 top, 80px bottom

Content sections:
- Inner padding: 60-80px
- Outer margin: 40-60px

Mobile Values

Hero sections:
- Inner padding: 60px
- Outer margin: 0 top, 40px bottom

Content sections:
- Inner padding: 30-40px
- Outer margin: 20-40px

Best Practices

1. Use larger spacing on desktop

2. Reduce spacing proportionally on mobile

3. Keep top/bottom spacing balanced

4. Consider content density

5. Maintain consistent patterns

Need help? Contact our support team at [e-mail] for assistance.

Pro Tip: Start with the built-in spacing controls, then use custom CSS when you need different top and bottom values or more precise mobile control.