CSS Box Model - Margins & Padding

Margins and padding define the spacing around and inside an element. Understanding the difference between them is essential for creating well-spaced, readable layouts.

The CSS box model visualizes how space is calculated around every element:

Every element is a box composed of four layers:

Content - The actual text or images
Padding - Space between content and border (inside)
Border - The outline around the element
Margin - Space outside the border (separates elements)

Margins

Margins create space outside an element's border. They're used to separate elements from each other and prevent layouts from feeling cramped.

Individual Margin Properties

You can control each side independently:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    background-color: lightblue;
    margin-top: 20px;
    margin-right: 15px;
    margin-bottom: 30px;
    margin-left: 10px;
}
</style>
</head>
<body>
    <div class="box">This box has different margins on each side</div>
</body>
</html>

Individual margin properties:

margin-top - Space above the element
margin-right - Space to the right
margin-bottom - Space below the element
margin-left - Space to the left

Margin Shorthand

Instead of writing four separate properties, you can use the margin shorthand:

Four values: top, right, bottom, left

margin: 40px 100px 120px 80px;
/* top: 40px, right: 100px, bottom: 120px, left: 80px */

Think of it as going clockwise starting from the top.

Three values: top, horizontal, bottom

margin: 40px 100px 120px;
/* top: 40px, right/left: 100px, bottom: 120px */

The second value applies to both left and right.

Two values: vertical, horizontal

margin: 30px 80px;
/* top/bottom: 30px, left/right: 80px */

This is the most common shorthand - vertical spacing, then horizontal spacing.

One value: all sides

margin: 20px;
/* All sides: 20px */

Margin Values

Margins accept several types of values:

<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
    margin: 20px;  /* Fixed pixels */
}
.percentage {
    margin: 5%;  /* Percentage of container width */
}
.centered {
    width: 300px;
    margin: 0 auto;  /* Horizontal centering */
}
.negative {
    margin-top: -10px;  /* Pull element up */
}
</style>
</head>
<body>
    <div class="fixed">Fixed margin</div>
    <div class="percentage">Percentage margin</div>
    <div class="centered">Centered with auto margins</div>
    <div class="negative">Negative margin (overlaps above element)</div>
</body>
</html>

Common values:

px - Fixed space (e.g., 20px)
% - Relative to container width (e.g., 5%)
auto - Browser calculates automatically (useful for centering)
Negative values - Pull elements closer or create overlaps (e.g., -10px)

Using auto for centering: When you set margin: 0 auto on a block element with a defined width, the browser automatically calculates equal left and right margins, centering the element horizontally.

Padding

Padding creates space inside the element - between the content and the border. It's essential for preventing text from touching the edges of containers.

Individual Padding Properties

<!DOCTYPE html>
<html>
<head>
<style>
.padded-box {
    background-color: lightcoral;
    border: 2px solid black;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 15px;
}
</style>
</head>
<body>
    <div class="padded-box">
        This content has space between it and the border
    </div>
</body>
</html>

Individual padding properties:

padding-top
padding-right
padding-bottom
padding-left

Padding Shorthand

Padding shorthand works exactly like margin shorthand:

One value - all sides

padding: 20px;

All four sides get 20px of padding.

Two values - vertical, horizontal

padding: 20px 40px;

Top and bottom get 20px, left and right get 40px.

Three values - top, horizontal, bottom

padding: 20px 40px 10px;

Top: 20px, left/right: 40px, bottom: 10px.

Four values - top, right, bottom, left

padding: 20px 40px 10px 5px;

Clockwise from the top: 20px, 40px, 10px, 5px.

Practical Example

Here's a card component using both padding and margin:

<!DOCTYPE html>
<html>
<head>
<style>
.card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;        /* Space inside the card */
    margin: 20px auto;    /* Space around the card + center it */
    max-width: 400px;
}

.card h2 {
    margin-top: 0;        /* Remove default top margin */
    margin-bottom: 10px;
}

.card p {
    margin-bottom: 0;     /* Remove default bottom margin */
}
</style>
</head>
<body>
    <div class="card">
        <h2>Card Title</h2>
        <p>This is a card with proper spacing. The padding keeps content away from edges, while margins separate it from other elements.</p>
    </div>
</body>
</html>

Key Differences

Property	Space Location	Affects Background	Use Case
Margin	Outside border	No	Separate elements
Padding	Inside border	Yes	Space content from edges

Important distinction:

Margins are transparent - the background color doesn't extend into margins
Padding includes the element's background color - the background extends into the padding area

Common Patterns

Removing default spacing

Browsers add default margins to many elements (headings, paragraphs, lists). It's common to reset these:

h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

Then add back only the spacing you need.

Consistent vertical rhythm

Create visual harmony by using consistent vertical spacing:

p, ul, ol {
    margin-bottom: 1.5rem;
}

h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

Button padding

Buttons need padding to be clickable and visually balanced:

button {
    padding: 12px 24px;  /* Vertical: 12px, Horizontal: 24px */
    border: none;
    background-color: blue;
    color: white;
}

Margin Collapsing

When two vertical margins meet, they collapse into a single margin. The larger margin wins.

<!DOCTYPE html>
<html>
<head>
<style>
.box-a {
    margin-bottom: 30px;
    background-color: lightblue;
}

.box-b {
    margin-top: 20px;
    background-color: lightcoral;
}
</style>
</head>
<body>
    <div class="box-a">Box A has 30px bottom margin</div>
    <div class="box-b">Box B has 20px top margin</div>
    <!-- Actual space between them: 30px (not 50px!) -->
</body>
</html>

The space between these boxes is 30px, not 50px. The larger margin (30px) "wins."

Important notes:

Only vertical margins collapse (top and bottom)
Horizontal margins never collapse
Padding never collapses

Best Practices

Use margins for external spacing:

Separate sections of content
Create space between sibling elements
Center elements horizontally with margin: 0 auto

Use padding for internal spacing:

Keep text away from container edges
Create clickable areas for buttons and links
Add breathing room inside boxes

Be consistent:

Define spacing rules in your CSS once and reuse them
Use the same vertical spacing throughout your site (e.g., 1.5rem)
Use shorthand when all sides have the same value

Consider using rem units:

.section {
    padding: 2rem;     /* Scales with root font-size */
    margin-bottom: 3rem;
}

Using rem instead of px creates more flexible, scalable spacing.

CSS Box Model - Margins & Padding

CSS Box Model - Margins & Padding

Margins

Individual Margin Properties

Margin Shorthand

Four values: top, right, bottom, left

Three values: top, horizontal, bottom

Two values: vertical, horizontal

One value: all sides

Margin Values

Padding

Individual Padding Properties

Padding Shorthand

One value - all sides

Two values - vertical, horizontal

Three values - top, horizontal, bottom

Four values - top, right, bottom, left

Practical Example

Key Differences

Common Patterns

Removing default spacing

Consistent vertical rhythm

Button padding

Margin Collapsing

Best Practices

CSS Typography Basics

CSS Positioning Basics