Element Spacing & Alignment

caution

Spacing changes can create layout shifts (CLS). Make changes incrementally and verify on mobile and desktop before deploying.

Element Spacing & Alignment Explained

Area	What you control	Where it lives
Container width	Maximum content width	Customizer + layout config
Content padding	Inner spacing around content	Customizer spacing settings
Vertical rhythm	Consistent spacing between sections	Your spacing scale + CSS
Alignment	How elements align in regions	Structure markup + CSS

Why It Matters

• Consistent spacing is the difference between a "theme demo" and a professional design system.
• Overriding spacing per-page leads to brittle CSS that is hard to maintain.
• Spacing affects performance (CLS) and perceived quality.

How It Works

GeneratePress reads layout/spacing theme mods and outputs CSS (often inline or enqueued) to apply padding/margins. Your child theme can add additional CSS utilities for a consistent spacing scale.

flowchart LR
  MODS[(Theme mods)] --> OUT[Layout CSS]
  OUT --> REGIONS[Header / Content / Footer]
  CHILD[Child theme CSS] --> REGIONS

Practical Walkthrough

Step 1: Locate Layout and Spacing Config

locate-layout-config.sh

cd /var/www/html/wp-content/themes/generatepress
ls inc/customizer/configs | grep -E "layout|spacing" || true
grep -R "spacing\|padding\|margin" -n inc/customizer/configs/layout.php 2>/dev/null | head -n 40

Step 2: Inspect Structure Markup for Containers

inspect-container-markup.sh

cd /var/www/html/wp-content/themes/generatepress
grep -R "container\|inside-" -n inc/structure templates | head -n 40

Step 3: Validate the Current Width/Padding Values

check-current-layout-mods.sh

cd /var/www/html
wp option get theme_mods_generatepress --format=json > /tmp/theme_mods_generatepress.json
grep -n "width\|padding\|spacing" /tmp/theme_mods_generatepress.json | head -n 40

Step 4: Inspect the Theme CSS Files That Influence Spacing

inspect-theme-css-for-spacing.sh

cd /var/www/html/wp-content/themes/generatepress
ls -lh assets/css 2>/dev/null || true
grep -R "padding\|margin" -n assets/css 2>/dev/null | head -n 40

Practical Examples

Example 1: Create a Simple Spacing Utility File

wp-content/themes/generatepress-child/assets/css/spacing.css

.u-mt-3 { margin-top: 12px; }
.u-mt-6 { margin-top: 24px; }
.u-mb-3 { margin-bottom: 12px; }
.u-mb-6 { margin-bottom: 24px; }
.u-py-6 { padding-top: 24px; padding-bottom: 24px; }

Then enqueue it from your child theme (see the Child Theme Structure lesson).

Example 2: Target a Specific Layout Region Carefully

wp-content/themes/generatepress-child/assets/css/custom.css

/* Example: tighten the gap between header and main content */
.site-header + .site-content {
  margin-top: 0;
}

Example 3: Add Responsive Spacing Utilities

wp-content/themes/generatepress-child/assets/css/spacing.css

@media (max-width: 768px) {
  .u-py-6 { padding-top: 16px; padding-bottom: 16px; }
}

Example 4: Use Fluid Spacing with clamp() (Optional)

wp-content/themes/generatepress-child/assets/css/spacing.css

.u-py-fluid {
  padding-top: clamp(16px, 2vw, 32px);
  padding-bottom: clamp(16px, 2vw, 32px);
}

Best Practices

Practice	Why
Use a small spacing scale (4-6 steps)	Keeps layout consistent
Avoid negative margins unless necessary	Prevents unpredictable overlaps
Test at common breakpoints	Spacing failures show up on mobile first
Prefer region-level selectors	Reduces global CSS side effects
Keep spacing changes reversible	Easier rollback when CLS regresses

Troubleshooting

Issue	Cause	Fix
Spacing changes do nothing	CSS specificity conflict	Use a more specific selector and inspect output
CLS increases	Spacing applied after render	Reduce layout shifts and avoid late-loading fonts
Different spacing on editor vs front end	Editor styles differ	Validate with logged-out front-end view
Too much space around blocks	Block editor adds default margins	Add targeted CSS for block spacing instead of global resets

Hands-On

1. Pick one region (header, content, footer) and document its current spacing.
2. Create a spacing utility file (spacing.css) and enqueue it.
3. Apply one utility class to a test element and verify no CLS regressions.
4. Use grep to find the CSS rule that controls your main container padding and document it.

Quick Reference

Goal	Command
Find spacing settings	grep -R "spacing|padding" -n inc/customizer/configs
Inspect container markup	grep -R "inside-|container" -n inc/structure templates

What's Next

• Next: Header & Navigation
• Related: Global Layout Framework