Vertical Spacing
Adjust responsive section padding globally or use a spacing multiplier for one section.
Use spacing to make a page feel compact or generous without manually entering padding at every screen width. AI Website Creator separates the site's spacing scale from a selected section's spacing multiplier.
At a Glance
| Control | Where | Scope | Starting value |
|---|---|---|---|
| Vertical | Style guide, Spacing | Section top and bottom padding | M |
| Horizontal | Style guide, Spacing | Section side gutters | M |
| Vertical | Selected section, Style | One section's vertical padding | Default, 1x |
| Randomize spacing | Spacing header | Both global spacing choices | Tries valid steps |
Global Vertical Spacing
Open Spacing
Set Vertical
Preview smaller screens
| Step | Above 1024 px | At or below 1024 px | At or below 768 px |
|---|---|---|---|
| S | 48 px | 36 px | 28 px |
| M, default | 80 px | 60 px | 40 px |
| L | 112 px | 80 px | 52 px |
| XL | 144 px | 100 px | 64 px |
These are section padding values for each side. They are not a guarantee of the total visible distance between two pieces of content: headings, images, and template layout gaps also contribute.
Global Horizontal Spacing
Horizontal controls the section container's left and right gutters. It does not change the number of columns or card padding.
| Step | Above 1024 px | At or below 1024 px | At or below 768 px |
|---|---|---|---|
| XS | 24 px | 12 px | 12 px |
| S | 64 px | 12 px | 12 px |
| M, default | 100 px | 15 px | 15 px |
| L | 140 px | 32 px | 20 px |
| XL | 180 px | 48 px | 24 px |
The template container maximum is 1440 px. There is no container-width control or global card-padding control in this spacing panel.
Vertical Spacing for One Section
Select the section and expand Style. Its Vertical slider scales the global vertical value.
| Stop | What it does | With global M above 1024 px / at or below 768 px |
|---|---|---|
| 0x | Removes this controlled vertical padding | 0 / 0 px |
| 0.5x | Half the site rhythm | 40 / 20 px |
| Default, 1x | Uses the site rhythm | 80 / 40 px |
| 1.5x | Adds breathing room | 120 / 60 px |
| 2x | Doubles the site rhythm | 160 / 80 px |
The default multiplier is 1. Changing the global scale later also changes the effective padding of sections with multipliers. There is no separate mobile-only padding field in this control.
What Spacing Does Not Change
The spacing controls do not rewrite text, crop images, change a section's layout, or tune every gap inside a template. Choose a different Layout when the internal arrangement is wrong. Imported designs use the reduced style guide, so the full global spacing panel is not shown there.
Example: A Spacious Hero and Compact Content
Keep a predictable baseline
Give the hero more air
Review the result