Control the spacing and height of your website header to match your design preferences.
​

Header padding controls the space above and below your header content. Adjusting it changes how much breathing room your names, logo, and navigation have, affecting the overall look and feel of your site!
​

Padding is the space between your header content (names, logo, nav menu) and the edges of the header area.
​

Padding top: Space above your header content
​

Padding bottom: Space below your header content
​

More padding = larger, more spacious header
Less padding = compact, streamlined header
​

Visual balance. Some headers feel cramped, others feel too roomy.
​

Match your style. Elegant weddings might want more space, casual weddings less.
​

Mobile optimization. Reduce padding on phones to save screen space.
​

Logo size. If you have a logo, more padding gives it room to breathe.
​

Personal preference. You might just like how a certain amount of padding looks!
​

Your header spacing updates immediately!
​

Padding is usually measured in pixels (px).
​

Small padding: 10-20px (compact, minimal)
​

Medium padding: 30-50px (comfortable, standard)
​

Large padding: 60-100px (spacious, luxurious)
​

Extra large: 100px+ (dramatic, statement header)
​

You can usually set different values:
​

More top, less bottom: Pushes content down from the very top
​

More bottom, less top: Creates space before your page content begins
​

Equal: Centered, balanced look
​

Different: Asymmetrical, can create interesting effects
​

Experiment to see what looks best!
​

Large logos: Give them space to shine
​

Minimal designs: Extra white space feels elegant
​

Desktop views: Larger screens can handle more padding
​

Sticky headers: Headers that stay visible when scrolling often need padding
​

Make a statement: Lots of padding creates a bold, confident look
​

Mobile devices: Save screen space on small screens
​

Lots of navigation links: Compact headers fit more links
​

Content-heavy sites: Get to your content faster
​

Minimalist themes: Some themes are designed with minimal padding
​

Sticky headers: Less padding when the header shrinks on scroll
​

After adjusting:
​

Some systems let you set different padding for mobile vs. desktop:
​

Desktop: 60px top and bottom
​

Mobile: 20px top and bottom
​

This gives you a spacious header on computers but saves space on phones!
​

If you have a header image, padding affects how much space is around it:
​

More padding: Image appears smaller with space around it
​

Less padding: Image is more prominent
​

Find the right balance for your design!
​

Your navigation menu is part of the header, so padding affects it too:
​

Generous padding: Menu has lots of space, easy to click
​

Tight padding: Menu feels compact, might be harder to tap on mobile
​

Consider usability when adjusting!
​

Responsive padding: Automatically adjusts based on screen size
​

Fixed padding: Same on all devices
​

Responsive is usually better! Check if your theme supports it.
​

Padding affects how "heavy" your header feels:
​

More padding = lighter, airier
​

Less padding = denser, more compact
​

Match the feeling you want guests to have when they visit your site!
​

Padding works with alignment to create your header's look:
​

Centered content + lots of padding: Elegant, formal
​

Left-aligned content + minimal padding: Modern, clean
​

Center-aligned + minimal padding: Compact, efficient
​

Too much: Header takes up half the screen before guests see any content
​

Too little: Header feels cramped and hard to read
​

Unbalanced: Top and bottom padding are wildly different for no reason
​

Not testing mobile: Looks great on desktop, terrible on phones
​

Most systems use pixels (px), but you might see:
​

px (pixels): Fixed spacing (most common)
​

em/rem: Relative to text size
​

% (percent): Relative to container size
​

Pixels are simplest and most predictable!
​

Padding: Space inside the header (around the content)
​

Margin: Space outside the header (between header and other elements)
​

You're probably adjusting padding, but some systems use margin. They work similarly!
​

Every theme has default padding. If you're unsure:
​

Start with the default
​

Adjust gradually (10-20px at a time)
​

Compare to the default if you want to reset
​

If your header sticks to the top when scrolling:
​

Full padding when at top: 60px feels spacious
​

Reduced padding when scrolling: 30px keeps it compact
​

Some themes automatically reduce padding on sticky headers!
​

Enough padding makes touch targets bigger (good for mobile tapping)
​

Too little padding makes buttons hard to click
​

Balance aesthetics with usability!
​

Header padding is a subtle detail that makes a big difference in how polished and professional your site feels. It's worth spending a few minutes to get it just right!
​