Beginner5 min readShare
Was this chapter helpful?
Share
The #1 difference between amateur and professional websites. Master whitespace and your sites will instantly look better.
When in doubt, add more space.
Beginners always cram things together. Professional designs breathe. White space is not wasted space — it guides the eye and creates hierarchy.
All spacing should be multiples of 4px (or 8px for simplicity). This creates consistent, harmonious layouts.
Space inside an element. Between the border and the content.
← padding →
"Add padding inside this card"
Space outside an element. Between this element and its neighbors.
↕ margin
"Add space outside this element to separate it from its neighbors"
Space between items in a flex or grid container. The modern way.
← gap →
"Add equal space between these items"
These are the most common spacing patterns in professional websites. Tell your AI tool what you want and it will handle the details.
"Center my page content with comfortable side padding"
Centered content with responsive side padding. Use on every page.
"Add generous vertical space between page sections"
Vertical padding between major page sections.
"Add space below the section title before the content starts"
Space below section titles before content starts.
"Make a responsive grid of cards — 1 column on mobile, 3 on desktop"
Responsive grid with comfortable gaps.
"Add comfortable inner padding to my cards"
Internal card padding — comfortable but not wasteful.
"Make my buttons feel comfortable to click with proper padding"
Horizontal is always more than vertical.
"Add consistent spacing between my form fields and inputs"
Consistent spacing between form fields.
"Limit the text width so lines are easy to read, about 65 characters"
Optimal reading width (~65 chars) with relaxed line height.
"Make a navbar that is a standard height with side padding"
64px tall navbar with responsive horizontal padding.
"Stack these items vertically with even spacing between them"
Consistent vertical spacing between stacked items.
Standard height. 56px for a more compact look.
Should match the size of the button text.
Standalone icons like social media links.
Comments, compact lists.
Navbar, cards, standard use.
Profile pages, headers.
In navbar next to site name.
Feature cards, section icons.
Standard floating action button.
Minimum size for anything tappable on mobile.
Modern, friendly look. Larger for cards.
Subtle borders. 2px for emphasis.
"Add more breathing room between sections — they feel too close together. Make the vertical spacing generous."
"The cards need more internal padding so the content isn't jammed against the edges. Also increase the space between the cards."
"The content stretches too wide on big screens. Center it and limit the max width so it looks good on all screen sizes."
"The text lines are too long to read comfortably. Limit the paragraph width so each line is about 65 characters."
Copy-paste these prompts into your AI tool to apply what you just learned.
APPLY CONSISTENT SPACING
"Review my page layout and apply consistent spacing. Use 8px increments — 16px for tight gaps, 24px for related items, 48px between sections. Make sure padding and margins follow the same scale throughout."
ADD BREATHING ROOM
"My page looks cramped. Add breathing room between sections and components using a consistent spacing scale. Increase padding inside cards, add more space between the heading and content, and make sure nothing feels jammed together."
SET UP PAGE CONTAINERS
"Set up a centered page container with a max-width of [1280px / 1024px / 768px]. Add responsive horizontal padding — 16px on mobile, 24px on tablet, 48px on desktop. Center the container on the page."
