Margin creates space outside an element’s border (separating it from neighbors), while padding creates space inside the border (pushing the content inward). Understanding this distinction is central to mastering layout and the CSS box model. Margins affect external spacing and can collapse; padding affects internal spacing and background painting. Test layout changes across breakpoints.
What is the difference between margin and padding?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Both margin and padding control spacing, but they apply to different regions of the CSS box. Padding is inside the element (between content and border), while margin is outside the element (between the border and surrounding boxes).
Aspect | Margin | Padding |
|---|---|---|
Location | Outside the border | Inside the border |
Affects Background | Transparent (no background color) | Shares the element’s background |
Layout Impact | Separates elements from each other | Increases clickable/visual area within the element |
Collapsing Behavior | Vertical margins may collapse | Padding never collapses |
Box-Sizing Effect | Does not affect content area directly | Can change perceived size; with content-box it grows the box |
Visual Example
Consider a <div class="card"> with a border:
- Padding pushes the text inward, making the card look roomier.
- Margin pushes other elements away from the card, creating separation.
Example: Comparing Rules
CSS
.card {
border: 2px solid #cbd5e1;
padding: 16px; /* inner space */
margin: 24px; /* outer space */
background: #ffffff;
}
This card has internal breathing room (padding) and is spaced away from neighbors (margin).
When to Use Which
- Use padding to improve readability or increase tap targets inside buttons, cards, and inputs.
- Use margin to control spacing between headings, paragraphs, sections, and components.
- Prefer margin for vertical rhythm between sibling elements; prefer padding for internal layout balance.
Edge Cases
- Collapsing margins: adjacent vertical margins (e.g., between two paragraphs) merge to the largest value; padding avoids this.
- Outline vs border: margins sit outside both; padding sits inside the border but beneath the outline.
- Auto margins:
margin: 0 auto;can center block elements horizontally; padding cannot.
Practical scenario
Space out cards (margin) and add breathing room inside cards (padding).
Common pitfalls
- Margin collapse causing unexpected spacing.
- Padding affecting background and size calculations.
- Using margin for alignment instead of layout.
Gap in flex/grid is often safer for spacing. Test with nested layouts and responsive widths.
Still so complicated?
Think of a gift box: padding is the protective bubble wrap inside the box; margin is the space you leave around the box so it doesn’t bump into others.
Summary
- Padding = inner spacing; Margin = outer spacing.
- Padding affects background area; margin is always transparent.
- Margins can collapse vertically; padding cannot.
- Choose based on whether you’re spacing inside the component or between components.
Similar questions
Guides