If you have ever looked at a webpage and thought, “Why does this section feel too cramped?” or “Why is there so much space between these elements?”, you have already encountered one of the most important aspects of frontend development: spacing.
Spacing is one of those details users rarely notice when it is done well — but immediately notice when it is wrong.
Two CSS properties sit at the center of this discussion:
margin and padding.
Understanding the difference between CSS margin and padding is fundamental to building clean layouts, responsive interfaces, and polished user experiences.
But good spacing is about more than knowing which property to use. It is also about understanding visual hierarchy, consistency, spacing systems, component relationships, and the box model.
In this guide, we’ll break down:
- What CSS margin is
- What CSS padding is
- Margin vs padding
- How the CSS box model works
- Practical spacing rules for UI design
- The 8px spacing system
- How to choose margin and padding
- Button padding guidelines
- How developers inspect spacing on real websites
- How to compare webpage spacing with Figma designs
- A faster way to inspect margin and padding using Captain Spyglass
What Is CSS Margin?
Margin is the space outside an element.
It controls the distance between an element and the elements surrounding it.
For example:
.card {
margin: 20px;
}
This creates 20px of space around the outside of the card.
You can also control each side independently:
.card {
margin-top: 20px;
margin-right: 16px;
margin-bottom: 24px;
margin-left: 16px;
}
Or use CSS shorthand:
.card {
margin: 20px 16px 24px 16px;
}
Think of margin as external space
If you have two cards:
┌───────────────┐ ┌───────────────┐
│ Card 1 │ │ Card 2 │
└───────────────┘ └───────────────┘
↑
margin
The space between the cards is controlled by margin or another layout mechanism such as gap.
Margin essentially answers:
“How much space should exist between this element and the elements around it?”
What Is CSS Padding?
Padding is the space inside an element, between its content and its border.
For example:
.card {
padding: 20px;
}
The content inside the card gets 20px of breathing room from the card’s edges.
┌──────────────────────────────┐
│ ↑ padding ↑ │
│ │
│ Card Content │
│ │
│ ↓ padding ↓ │
└──────────────────────────────┘
You can control padding independently:
.card {
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
}
Padding answers:
“How much space should exist between this component’s content and its boundaries?”
Margin vs Padding: What’s the Difference?
The easiest way to remember the difference is:
Margin = outside the element
Padding = inside the element
Consider a simple card:
.card {
margin: 24px;
padding: 16px;
border: 1px solid #ddd;
}
The result is:
←──── margin ────→
┌──────────────────────────┐
│ ← padding → │
│ │
│ Card Content │
│ │
└──────────────────────────┘ ←──── margin ────→
The margin separates the card from other elements.
The padding separates the content from the card’s boundary.
Understanding the CSS Box Model
To really understand margin and padding, you need to understand the CSS box model.
Every HTML element can be thought of as having four layers:
┌───────────────────────────────┐
│ Margin │
│ ┌───────────────────────┐ │
│ │ Border │ │
│ │ ┌───────────────┐ │ │
│ │ │ Padding │ │ │
│ │ │ ┌─────────┐ │ │ │
│ │ │ │ Content │ │ │ │
│ │ │ └─────────┘ │ │ │
│ │ └───────────────┘ │ │
│ └───────────────────────┘ │
└───────────────────────────────┘
The four areas are:
- Content
- Padding
- Border
- Margin
This is commonly referred to as the CSS box model.
Understanding this model makes debugging layout problems significantly easier.
Why Spacing Matters in UI Design
Good spacing isn’t simply about making a webpage look attractive.
It creates visual hierarchy.
Imagine a dashboard where every heading, button, card, and paragraph has exactly the same amount of spacing.
Everything starts to look equally important.
Now introduce intentional spacing:
Dashboard
[Large space]Revenue Overview[Small space]Revenue cards[Medium space]Recent Transactions[Small space]Transaction table
The spacing itself communicates relationships.
Users can visually understand:
- Which elements belong together
- Which sections are separate
- What deserves attention
- Where one interaction ends and another begins
In other words:
Spacing is a visual language.
The “Outer Margins Are Larger Than Inner Margins” Principle
One useful UI design principle is to think about spacing according to hierarchy.
A larger container generally has more space separating it from other containers, while elements inside that container often have smaller spacing.
For example:
Page Section
↓
Card
↓
Card Header
↓
Title
↓
Supporting Text
The spacing might progressively become smaller:
Section → Section 48px
Card → Card 32px
Card → Content 24px
Content → Content 16px
Text → Text 8px
This creates a sense of nesting.
A useful way to think about it is:
The deeper you go into a component hierarchy, the more compact the spacing can become.
This isn’t a strict CSS rule. It’s a design principle that helps create visual grouping and hierarchy.
The 8px Spacing System
Many modern design systems use a spacing scale based around multiples of 8px.
For example:
8px
16px
24px
32px
40px
48px
64px
80px
The exact scale varies between design systems, but the underlying idea is consistency.
Instead of randomly choosing:
margin: 13px;
padding: 19px;
margin-bottom: 27px;
you might establish a predictable system:
margin: 16px;
padding: 24px;
margin-bottom: 32px;
This makes the interface feel more intentional.
Why spacing systems help
A consistent spacing system provides:
- Better visual rhythm
- Easier design decisions
- More consistent components
- Easier maintenance
- Better collaboration between designers and developers
- Easier translation from Figma to code
The important point is not that 8px is always correct.
The important point is:
Use a consistent spacing system rather than arbitrary numbers everywhere.
How Much Margin Should You Use?
There is no universal value that works for every interface.
The right margin depends on:
- Component hierarchy
- Content density
- Screen size
- Design system
- Typography
- Layout
- Interaction patterns
For example:
Small relationship → 8px
Related elements → 16px
Component separation → 24px
Section separation → 32–48px
Major section separation → 64px+
These are starting points — not laws.
The key is to make the relationship between elements visually understandable.
Padding Rules for Buttons
Buttons are an interesting case because padding directly affects both appearance and usability.
Consider:
button {
padding: 8px 24px;
}
Here:
- Vertical padding =
8px - Horizontal padding =
24px
The horizontal padding is 3× the vertical padding.
This often creates a visually balanced button because text naturally occupies more horizontal space than vertical space.
For example:
←──── 24px ────→
┌──────────────────────┐
│ Submit │
└──────────────────────┘
↑ ↑
8px vertical
Common button padding might look like:
button {
padding: 8px 24px;
}
or:
button {
padding: 12px 24px;
}
or:
button {
padding: 12px 32px;
}
Again, these aren’t rigid rules.
The right choice depends on:
- Font size
- Button height
- Design system
- Touch target requirements
- Visual style
- Amount of text
- Button importance
Margin vs Padding: When Should You Use Which?
A simple rule can help.
Use margin when:
You want to control the relationship between elements.
.heading {
margin-bottom: 16px;
}
Use padding when:
You want to control the space inside a component.
.card {
padding: 24px;
}
For example:
.card {
margin-bottom: 24px;
padding: 20px;
}
Here:
margin-bottomseparates the card from the next component.paddingcreates breathing room inside the card.
Don’t Forget CSS gap
Modern CSS layouts also provide another powerful spacing mechanism:
.container {
display: flex;
gap: 16px;
}
or:
.grid {
display: grid;
gap: 24px;
}
gap is particularly useful when spacing siblings in Flexbox or Grid layouts.
Instead of:
.card {
margin-right: 16px;
}
you can often use:
.cards {
display: flex;
gap: 16px;
}
This can make layout intent clearer and avoids some common margin-management problems.
How Developers Check Margin and Padding on a Webpage
This is where things become interesting for frontend developers.
You receive a Figma design.
You build the page.
Then someone says:
“The spacing doesn’t look exactly like Figma.”
Now you start inspecting.
Right-click → Inspect.
Open DevTools.
Find the element.
Check computed styles.
Look at the box model.
Check:
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
Then compare those values with the design.
And then you repeat the same process for another component.
And another.
And another.
For a complex page, checking spacing can become surprisingly time-consuming.
Comparing a Website With Figma
One of the most common frontend workflows is:
Figma → Development → Browser → Inspection → Adjustment
You might notice:
Figma:
Card padding = 24px
Browser:
Card padding = 20pxDifference:
4px
Then you check:
Header
Card
Button
Input
Footer
Section
Grid
This is where having a quick visual way to inspect spacing can save a lot of time.
A Faster Way to Inspect Margin and Padding
This is exactly the problem Captain Spyglass was built around.
Instead of constantly opening DevTools and digging through styles, Captain Spyglass lets you inspect webpage elements directly while you work.
Hover over an element and quickly understand its:
- Margin
- Padding
- Dimensions
- Spacing
- Alignment
- Positioning
- Element relationships
It is particularly useful when you’re trying to answer questions such as:
“Why is this element 16px away from that one?”
“Where is this extra 24px coming from?”
“Does this component have 16px or 24px padding?”
“Is this section aligned correctly with the Figma design?”
For frontend developers, UI engineers, QA engineers, and anyone involved in pixel-perfect implementation, this turns spacing inspection into a much faster workflow.
Captain Spyglass: Inspect UI Spacing Without the Guesswork
Captain Spyglass — Alignment Inspector is designed to make webpage inspection faster.
Instead of repeatedly navigating through DevTools just to understand spacing, you can hover over an element and inspect its layout information directly.
It becomes especially useful during:
- Figma-to-code implementation
- UI debugging
- Pixel-perfect development
- Design QA
- Responsive layout testing
- Frontend development
- Design-to-development handoff
The goal is simple:
Stop guessing where the spacing comes from. Inspect it.
Final Takeaway
There isn’t a single “perfect” margin or padding value.
Good UI spacing comes from consistency, hierarchy, proportion, and context.
Remember these fundamentals:
Margin
Space outside an element.
margin: 24px;
Padding
Space inside an element.
padding: 16px;
Gap
Space between items in Flexbox/Grid.
gap: 16px;
Spacing system
Use a consistent scale rather than arbitrary values.
8 → 16 → 24 → 32 → 48 → 64
Visual hierarchy
Larger structural relationships generally need more space than tightly related elements.
Buttons
Horizontal padding is often larger than vertical padding to create a balanced visual shape.
And when you’re implementing or reviewing a real webpage, don’t rely on your eyes alone.
Inspect the spacing. Understand the box model. Compare it with the design. Then adjust.
That’s where tools like Captain Spyglass can make the frontend workflow significantly faster.
Captain Spyglass — Hover. Inspect. Understand.