CSS Margin & Padding
What are Margin and Padding?
Margin and Padding are two main CSS properties that control the space (spacing) around an element. They work in different areas of the box model:
- Padding — Empty space inside an element, between the content and the border
- Margin — Empty space outside an element, separating it from other elements
┌──────────── MARGIN (outside) ───────────┐
│ ┌────────── BORDER ──────────────────┐ │
│ │ ┌──────── PADDING (inside) ────┐ │ │
│ │ │ ┌────── CONTENT ──────────┐ │ │ │
│ │ │ │ │ │ │ │
│ │ │ └─────────────────────────┘ │ │ │
│ │ └──────────────────────────────┘ │ │
│ └────────────────────────────────────┘ │
└──────────────────────────────────────────┘
Simple analogy: Imagine a photo frame. Content is the photo itself, padding is the empty area between the photo and the frame, border is the frame, and margin is the distance from that photo frame to other photo frames on the wall.
Margin
The margin property controls the space outside an element.
Shorthand Notation
/* All sides */
margin: 10px;
/* Top & Bottom | Left & Right */
margin: 10px 20px;
/* Top | Left & Right | Bottom */
margin: 10px 20px 15px;
/* Top | Right | Bottom | Left (clockwise) */
margin: 10px 20px 15px 5px;
Auto Centering
margin: 0 auto; /* Horizontal centering for block elements */
Negative Margin
margin-top: -20px; /* Moves the element up */
Margin Collapse
Margin collapse is a unique CSS phenomenon where the margins between elements are not added together; instead, the larger margin value is used.
/* Both divs have a margin-bottom and margin-top of 20px */
/* The gap between them is not 40px, but 20px */
Note: Margin collapse only happens to block elements in normal flow, and only for vertical margins (top-bottom). Horizontal margins do not collapse.
Padding
The padding property controls the space inside an element.
Shorthand Notation
/* All sides */
padding: 10px;
/* Top & Bottom | Left & Right */
padding: 10px 20px;
/* Top | Left & Right | Bottom */
padding: 10px 20px 15px;
/* Top | Right | Bottom | Left */
padding: 10px 20px 15px 5px;
Key differences from margin:
- Padding is always positive (it cannot be negative)
- Padding does not collapse
- Padding is inside the box model (counted in border-box)
- Padding is filled with the element's background-color
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Margin & Padding</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
color: #333;
}
h1 {
margin-bottom: 25px;
}
.section {
background-color: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
h2 {
margin-bottom: 15px;
color: #2c3e50;
}
p {
line-height: 1.6;
color: #555;
margin-bottom: 10px;
}
code {
background-color: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
font-size: 13px;
}
/* === Margin Visualization === */
.margin-demo {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.margin-box {
width: 150px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: bold;
background-color: #e74c3c;
color: white;
}
.margin-box-1 { margin: 10px; }
.margin-box-2 { margin: 20px; }
.margin-box-3 { margin: 10px 25px; }
.margin-box-4 { margin: 5px 15px 25px 35px; }
.margin-auto { margin: 0 auto; }
/* === Padding Visualization === */
.padding-box {
background-color: #3498db;
color: white;
font-size: 13px;
font-weight: bold;
width: 200px;
margin-bottom: 15px;
}
.padding-box-1 { padding: 10px; }
.padding-box-2 { padding: 20px; }
.padding-box-3 { padding: 10px 25px; }
.padding-box-4 { padding: 5px 15px 25px 35px; }
.content-inner {
background-color: rgba(255, 255, 255, 0.3);
padding: 5px;
text-align: center;
border: 1px dashed rgba(255, 255, 255, 0.5);
}
/* === Margin Collapse === */
.collapse-box {
background-color: #2ecc71;
color: white;
padding: 10px;
text-align: center;
font-size: 13px;
font-weight: bold;
}
.collapse-1 {
margin-bottom: 30px;
}
.collapse-2 {
margin-top: 30px;
}
.actual-gap {
background-color: #fff3cd;
border: 1px dashed #f39c12;
padding: 8px;
text-align: center;
font-size: 12px;
color: #856404;
margin: 10px 0;
}
/* === Auto Centering === */
.center-demo {
border: 2px dashed #999;
padding: 10px;
margin-bottom: 15px;
}
.center-element {
width: 200px;
background-color: #9b59b6;
color: white;
padding: 12px;
text-align: center;
font-weight: bold;
font-size: 13px;
margin: 0 auto;
}
/* === Negative Margin === */
.negative-demo {
position: relative;
border: 2px solid #e74c3c;
padding: 15px;
margin-bottom: 15px;
}
.negative-box {
background-color: #3498db;
color: white;
padding: 15px;
text-align: center;
font-weight: bold;
font-size: 13px;
}
.negative-box-1 {
margin-bottom: -10px;
}
.negative-box-2 {
margin-top: 10px;
}
/* === Spacing System === */
.spacing-system {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.spacing-item {
text-align: center;
}
.spacing-visual {
width: 80px;
height: 80px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.spacing-label {
font-size: 11px;
color: #888;
margin-top: 5px;
}
.mt-1 { margin: 4px; }
.mt-2 { margin: 8px; }
.mt-3 { margin: 16px; }
.mt-4 { margin: 24px; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 16px; }
.p-4 { padding: 24px; }
</style>
</head>
<body>
<h1>CSS Margin & Padding</h1>
<!-- Margin Shorthand -->
<div class="section">
<h2>Margin Shorthand</h2>
<p>Padding and margin support shorthand notation for efficient configuration:</p>
<div class="margin-demo">
<div class="margin-box margin-box-1">margin: 10px</div>
<div class="margin-box margin-box-2">margin: 20px</div>
<div class="margin-box margin-box-3">margin: 10px 25px</div>
<div class="margin-box margin-box-4">margin: 5px 15px 25px 35px</div>
</div>
</div>
<!-- Padding Shorthand -->
<div class="section">
<h2>Padding Shorthand</h2>
<p>Padding works inside an element. Notice the area inside the blue box:</p>
<div class="padding-box padding-box-1">
<div class="content-inner">padding: 10px</div>
</div>
<div class="padding-box padding-box-2">
<div class="content-inner">padding: 20px</div>
</div>
<div class="padding-box padding-box-3">
<div class="content-inner">padding: 10px 25px</div>
</div>
<div class="padding-box padding-box-4">
<div class="content-inner">padding: 5px 15px 25px 35px</div>
</div>
</div>
<!-- Margin Collapse -->
<div class="section">
<h2>Margin Collapse</h2>
<p>Two elements each with a 30px margin. The actual gap is not 60px but 30px due to margin collapse:</p>
<div class="collapse-box collapse-1">
Element 1 — margin-bottom: 30px
</div>
<div class="actual-gap">
Actual gap: 30px (not 60px!) — Margin collapse
</div>
<div class="collapse-box collapse-2">
Element 2 — margin-top: 30px
</div>
</div>
<!-- Auto Centering -->
<div class="section">
<h2>Auto Centering</h2>
<p>Use <code>margin: 0 auto</code> to center a block element horizontally:</p>
<div class="center-demo">
<div class="center-element">
margin: 0 auto
</div>
</div>
</div>
<!-- Negative Margin -->
<div class="section">
<h2>Negative Margin</h2>
<p>Negative margin shifts an element in the opposite direction. Notice the second box hidden behind the first box:</p>
<div class="negative-demo">
<div class="negative-box negative-box-1">
margin-bottom: -10px
</div>
<div class="negative-box negative-box-2">
margin-top: 10px
</div>
</div>
</div>
<!-- Spacing System -->
<div class="section">
<h2>Consistent Spacing System</h2>
<p>Use consistent spacing values (multiples of 4 or 8) for a clean design:</p>
<div class="spacing-system">
<div class="spacing-item">
<div class="spacing-visual p-1">4px</div>
<div class="spacing-label">p-1</div>
</div>
<div class="spacing-item">
<div class="spacing-visual p-2">8px</div>
<div class="spacing-label">p-2</div>
</div>
<div class="spacing-item">
<div class="spacing-visual p-3">16px</div>
<div class="spacing-label">p-3</div>
</div>
<div class="spacing-item">
<div class="spacing-visual p-4">24px</div>
<div class="spacing-label">p-4</div>
</div>
</div>
</div>
</body>
</html>
Code Explanation
-
Universal Reset —
* { margin: 0; padding: 0; box-sizing: border-box; }removes all default browser spacing. This is a clean starting point. -
Margin Shorthand — Four red boxes showing the various ways to write margin:
10px— All sides the same20px— All sides the same10px 25px— top/bottom: 10px, left/right: 25px-
5px 15px 25px 35px— top, right, bottom, left (clockwise) -
Padding Shorthand — Blue boxes with a lighter content area inside to visualize the padding space. The larger the padding, the farther the content sits from the edges.
-
Margin Collapse — Two green boxes with margin-bottom and margin-top of 30px each. The actual gap is only 30px because CSS takes the largest value instead of adding the two together.
-
Auto Centering — A purple box that is horizontally centered using
margin: 0 auto. This only works if the element has a definedwidth(notwidth: autoorwidth: 100%). -
Negative Margin — The second blue box uses
margin-top: 10pxbut visually sticks right up against the first box because the first box hasmargin-bottom: -10px. -
Spacing System — A demonstration of a consistent spacing system based on multiples of 4px. This approach creates a harmonious visual rhythm in design.
Everyday Use Cases
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* === Section Layout === */
.section-hero {
background-color: #2c3e50;
color: white;
padding: 80px 20px;
text-align: center;
}
.section-hero h1 {
font-size: 36px;
margin-bottom: 16px;
}
.section-hero p {
font-size: 18px;
opacity: 0.8;
max-width: 600px;
margin: 0 auto 24px;
line-height: 1.6;
}
.btn-hero {
display: inline-block;
padding: 14px 32px;
background-color: #e74c3c;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.section-content {
padding: 60px 20px;
max-width: 800px;
margin: 0 auto;
}
.section-content h2 {
font-size: 24px;
margin-bottom: 20px;
color: #2c3e50;
}
.section-content p {
line-height: 1.8;
color: #555;
margin-bottom: 16px;
}
/* === Feature Cards === */
.features {
padding: 60px 20px;
max-width: 1000px;
margin: 0 auto;
}
.features h2 {
text-align: center;
font-size: 24px;
margin-bottom: 40px;
color: #2c3e50;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.feature-card {
background-color: white;
padding: 30px 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
text-align: center;
}
.feature-card h3 {
margin-bottom: 12px;
color: #2c3e50;
}
.feature-card p {
color: #666;
line-height: 1.6;
font-size: 14px;
}
.feature-icon {
font-size: 40px;
margin-bottom: 16px;
}
/* === Pricing Table === */
.pricing {
padding: 60px 20px;
max-width: 900px;
margin: 0 auto;
}
.pricing h2 {
text-align: center;
font-size: 24px;
margin-bottom: 40px;
color: #2c3e50;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.pricing-card {
background-color: white;
padding: 30px 24px;
border-radius: 8px;
border: 2px solid #eee;
text-align: center;
}
.pricing-card.featured {
border-color: #3498db;
position: relative;
}
.pricing-card h3 {
font-size: 18px;
margin-bottom: 8px;
color: #2c3e50;
}
.pricing-card .price {
font-size: 36px;
font-weight: bold;
color: #3498db;
margin: 16px 0;
}
.pricing-card .price span {
font-size: 14px;
color: #999;
}
.pricing-card ul {
list-style: none;
margin: 20px 0;
}
.pricing-card ul li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
color: #555;
font-size: 14px;
}
.btn-pricing {
display: inline-block;
padding: 12px 28px;
border: 2px solid #3498db;
color: #3498db;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- Hero Section -->
<div class="section-hero">
<h1>SkillVersitas</h1>
<p>The most complete CSS learning platform. Start your coding journey now!</p>
<a href="#" class="btn-hero">Start Learning</a>
</div>
<!-- Content Section -->
<div class="section-content">
<h2>Why Learn CSS?</h2>
<p>
CSS (Cascading Style Sheets) is a styling language used to
determine the appearance of HTML elements. With CSS, you can control colors,
fonts, layout, spacing, animations, and much more.
</p>
<p>
A strong understanding of CSS is an essential foundation for every web
developer. Without CSS, web pages are just unformatted, boring text.
</p>
</div>
<!-- Features -->
<div class="features">
<h2>Main Features</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Advanced Styling</h3>
<p>Master CSS properties from basic to advanced with practical examples.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📐</div>
<h3>Modern Layout</h3>
<p>Learn Flexbox and Grid to build responsive layouts.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>Responsive</h3>
<p>Build beautiful websites on all screen sizes.</p>
</div>
</div>
</div>
<!-- Pricing -->
<div class="pricing">
<h2>Choose a Plan</h2>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Free</h3>
<div class="price">$0<span>/month</span></div>
<ul>
<li>Access to basic materials</li>
<li>Code examples</li>
<li>Discussion forum</li>
</ul>
<a href="#" class="btn-pricing">Choose a Plan</a>
</div>
<div class="pricing-card featured">
<h3>Pro</h3>
<div class="price">$99<span>/month</span></div>
<ul>
<li>All basic materials</li>
<li>Advanced materials</li>
<li>Practice projects</li>
<li>Certificate</li>
</ul>
<a href="#" class="btn-pricing">Choose a Plan</a>
</div>
<div class="pricing-card">
<h3>Team</h3>
<div class="price">$299<span>/month</span></div>
<ul>
<li>All Pro features</li>
<li>Team dashboard</li>
<li>Analytics</li>
<li>Priority support</li>
</ul>
<a href="#" class="btn-pricing">Choose a Plan</a>
</div>
</div>
</div>
</body>
</html>
In the example above:
- Hero section uses large padding (80px top and bottom) to give the main content plenty of room
- Content section uses max-width: 800px; margin: 0 auto to center itself and limit the reading width
- Feature cards use gap: 30px and 30px of internal padding for consistent spacing
- Pricing cards use uniform padding and margin to create a professional look
When to Use Margin vs Padding?
| Use Margin | Use Padding |
|---|---|
| Separating one element from another | Adding space inside an element |
| Creating distance between sections | Enlarging the clickable area of a button |
margin: 0 auto for centering |
Adding space between the border and the content |
| Negative margin for overlap effects | Background color fills the padding area |
Conclusion
- Padding = space inside an element (between content and border)
- Margin = space outside an element (separating it from other elements)
- Shorthand notation:
margin: top right bottom left(clockwise) - Margin collapse only occurs on vertical margins of block elements — the largest value is taken, not the sum
margin: 0 autois the standard way to center a block element horizontally- Negative margin can be used for overlap effects or to shift elements
- Use a consistent spacing system (multiples of 4 or 8) for a harmonious design