> For the complete documentation index, see [llms.txt](https://design-packs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/understanding-inner-padding-and-outer-margin-settings.md).

# 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 <support@design-packs.com> 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.