Margin & Padding — Web Development Class 26

Class 026 — Margin & Padding

Spacing is one of the most important parts of CSS layout and web design. Proper spacing makes a website clean, readable, organized and professional.

CSS mainly provides two important properties for basic spacing:

Margin
Padding

Although margin and padding both create space, they work in different areas of an element.

Margin creates space outside an element’s border.

Padding creates space inside an element’s border, between the content and the border.

In this class, you will learn:

What margin is
What padding is
Margin vs padding
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
Margin shorthand
Padding shorthand
margin: auto
Centering elements
Negative margins
Percentage spacing
Margin collapsing
Practical website spacing

LEARNING OBJECTIVES

After completing this class, you will be able to:

Understand CSS margin.
Understand CSS padding.
Explain the difference between margin and padding.
Add spacing around elements.
Add spacing inside elements.
Control individual sides.
Use margin shorthand.
Use padding shorthand.
Center block elements using auto margins when appropriate.
Understand basic margin collapsing.
Use spacing more consistently in real website layouts.

WHAT IS MARGIN?

Margin creates space outside an element’s border.

Example:

.box {
margin: 20px;
}

This creates 20px of margin around the box.

Think of margin as the space separating one element from surrounding elements.

BASIC MARGIN EXAMPLE

HTML:

Hello World

CSS:

.box {
margin: 30px;
background-color: lightblue;
}

The margin creates space outside the box.

MARGIN SIDES

CSS provides four individual margin properties:

margin-top
margin-right
margin-bottom
margin-left

Example:

.box {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
}

This means:

Top = 20px
Right = 30px
Bottom = 40px
Left = 50px

MARGIN SHORTHAND

Instead of writing four separate properties, CSS provides shorthand syntax.

ONE VALUE

margin: 20px;

Meaning:

Top = 20px
Right = 20px
Bottom = 20px
Left = 20px

TWO VALUES

margin: 20px 40px;

Meaning:

Top and Bottom = 20px
Left and Right = 40px

THREE VALUES

margin: 10px 20px 30px;

Meaning:

Top = 10px
Left and Right = 20px
Bottom = 30px

FOUR VALUES

margin: 10px 20px 30px 40px;

The order is:

Top
Right
Bottom
Left

A useful way to remember the order is:

TRBL

Top
Right
Bottom
Left

WHAT IS PADDING?

Padding creates space between an element’s content and its border.

Example:

.box {
padding: 20px;
}

HTML:

Welcome to CSS

CSS:

.box {
padding: 20px;
background-color: lightgreen;
}

The text now has space around it inside the box.

PADDING SIDES

CSS provides four individual padding properties:

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

Example:

.card {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 30px;
}

PADDING SHORTHAND

Padding shorthand follows the same 1–4 value pattern as margin.

ONE VALUE

padding: 20px;

All four sides receive 20px.

TWO VALUES

padding: 20px 40px;

Top and Bottom = 20px

Left and Right = 40px

THREE VALUES

padding: 10px 20px 30px;

Top = 10px

Left and Right = 20px

Bottom = 30px

FOUR VALUES

padding: 10px 20px 30px 40px;

Top = 10px

Right = 20px

Bottom = 30px

Left = 40px

MARGIN VS PADDING

This is one of the most important CSS concepts for beginners.

Margin:

Creates space outside the border.

Padding:

Creates space inside the border.

Think of an element like this:

Margin
↓
Border
↓
Padding
↓
Content

Conceptually:

+—————————+
| MARGIN |
| +——————-+ |
| | BORDER | |
| | +———–+ | |
| | | PADDING | | |
| | | CONTENT | | |
| | +———–+ | |
| +——————-+ |
+—————————+

PRACTICAL DIFFERENCE

HTML:

Web Development

Learn HTML, CSS and JavaScript.

CSS:

.card {
margin: 30px;
padding: 20px;
border: 2px solid black;
}

Here:

margin: 30px;

creates space outside the card.

padding: 20px;

creates space between the card content and its border.

BACKGROUND COLOR AND PADDING

Background colors extend through the padding area.

Example:

.card {
padding: 30px;
background-color: blue;
color: white;
}

The blue background includes the padding area.

MARGIN AND BACKGROUND

Margin is outside the element’s border and background.

Example:

.card {
margin: 30px;
background-color: blue;
}

The margin area itself is not painted by the card’s background.

CENTERING WITH MARGIN AUTO

A common CSS technique is:

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

What does:

margin: 0 auto;

mean?

Top and Bottom:

Left and Right:

auto

When the element has an appropriate constrained width and available horizontal space, auto left and right margins can center the block horizontally.

EXAMPLE

.container {
width: 80%;
max-width: 1000px;
margin: 0 auto;
}

This is a common website container pattern.

WHY MARGIN AUTO NEEDS AVAILABLE SPACE

Consider:

.box {
width: 100%;
margin: 0 auto;
}

If the element already uses all available width, there may be no extra horizontal space for auto margins to distribute.

Example:

.box {
width: 500px;
max-width: 90%;
margin: 0 auto;
}

This provides a more obvious centering example.

SPACING BETWEEN SECTIONS

Margin can separate page sections.

Example:

.about {
margin-bottom: 80px;
}

.services {
margin-bottom: 80px;
}

However, page sections often also use padding for internal vertical spacing.

Example:

section {
padding: 80px 0;
}

SECTION PADDING

Example:

.about {
padding: 80px 0;
}

This creates vertical space inside the section.

CARD PADDING

Cards commonly use internal padding.

Example:

.card {
padding: 24px;
}

This prevents content from touching the edges of the card.

CARD MARGIN

Margin can separate one card from another in simple layouts.

Example:

.card {
margin-bottom: 20px;
}

Later, when you learn Flexbox and Grid, you will also use the gap property for spacing between layout items.

BUTTON PADDING

Padding is very important for buttons.

Example:

.button {
padding: 12px 24px;
}

This means:

Top and Bottom = 12px

Left and Right = 24px

HTML: Learn More

CSS:

.button {
display: inline-block;
padding: 12px 24px;
background-color: blue;
color: white;
text-decoration: none;
}

TEXT SPACING

Paragraphs often use bottom margin.

Example:

p {
margin-bottom: 16px;
}

Headings can also use margins.

Example:

h2 {
margin-bottom: 20px;
}

RESETTING DEFAULT MARGINS

Browsers provide default styles for many HTML elements.

For example, headings and paragraphs commonly have default margins.

A simple reset might include:

body {
margin: 0;
}

This removes the browser’s default body margin.

A broader reset sometimes uses:

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

However, removing all default margins and padding means you must deliberately restore appropriate spacing throughout the website.

Use resets intentionally.

NEGATIVE MARGIN

Margins can use negative values.

Example:

.box {
margin-top: -20px;
}

This can move the element closer to or overlap surrounding layout areas depending on the context.

Negative margins are valid CSS, but beginners should use them carefully.

IMPORTANT:

Padding cannot be negative.

Wrong:

.box {
padding: -20px;
}

Negative padding is invalid.

PERCENTAGE MARGIN

Margin can use percentages.

Example:

.box {
margin-left: 10%;
}

PERCENTAGE PADDING

Padding can also use percentages.

Example:

.box {
padding: 5%;
}

Be careful when using percentage-based spacing because its computed size depends on the containing block according to CSS rules.

USING REM FOR SPACING

Spacing can use rem values.

Example:

.card {
padding: 1.5rem;
margin-bottom: 2rem;
}

If the root font size is 16px:

1.5rem = 24px

2rem = 32px

CONSISTENT SPACING SYSTEM

Professional websites benefit from consistent spacing.

Example spacing scale:

4px
8px
12px
16px
24px
32px
48px
64px
80px

Instead of using random values:

13px
27px
43px
71px

use a deliberate spacing system.

Example:

.card {
padding: 24px;
}

.card h2 {
margin-bottom: 16px;
}

.section {
padding: 64px 0;
}

MARGIN COLLAPSING

Vertical margins of block elements in normal flow can sometimes collapse.

Consider:

Heading

Paragraph

CSS:

h2 {
margin-bottom: 30px;
}

p {
margin-top: 20px;
}

You might initially expect the space between them to be:

30px + 20px = 50px

But adjoining vertical margins can collapse under certain conditions.

In a simple case, the resulting margin may be the larger margin rather than their sum.

IMPORTANT:

Margin collapsing mainly concerns vertical block margins in normal flow.

Horizontal margins do not collapse in this way.

WHY BEGINNERS GET CONFUSED

A beginner may write:

h2 {
margin-bottom: 30px;
}

p {
margin-top: 20px;
}

and expect 50px of space.

When that does not happen, margin collapsing may be the reason.

SIMPLE SPACING STRATEGY

Instead of adding both:

margin-bottom

and:

margin-top

between every neighboring element, a project can use a consistent direction.

Example:

h2 {
margin-bottom: 16px;
}

p {
margin-bottom: 16px;
}

This can make spacing easier to reason about.

PRACTICAL WEBSITE EXAMPLE

HTML:

<meta charset="UTF-8">

<title>CSS Margin and Padding</title>

<link rel="stylesheet" href="style.css">

<header class="header">

    <div class="container">

        <h1>
            Web Development Course
        </h1>

    </div>

</header>


<main>

    <section class="services">

        <div class="container">

            <h2>
                Our Courses
            </h2>

            <div class="card">

                <h3>
                    HTML
                </h3>

                <p>
                    Learn website structure with HTML.
                </p>

            </div>

            <div class="card">

                <h3>
                    CSS
                </h3>

                <p>
                    Learn professional website styling.
                </p>

            </div>

        </div>

    </section>

</main>

CSS:

{
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial, sans-serif;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.header {
padding: 24px 0;
background-color: #0f172a;
color: white;
}

.header h1 {
margin: 0;
}

.services {
padding: 80px 0;
}

.services h2 {
margin-top: 0;
margin-bottom: 32px;
}

.card {
padding: 24px;
margin-bottom: 20px;
background-color: #f1f5f9;
}

.card h3 {
margin-top: 0;
margin-bottom: 12px;
}

.card p {
margin: 0;
}

CODE EXPLANATION

body {
margin: 0;
}

Removes the browser’s default body margin.

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

Creates a responsive centered container.

.header {
padding: 24px 0;
}

Adds internal vertical spacing to the header.

.services {
padding: 80px 0;
}

Adds space inside the top and bottom of the services section.

.services h2 {
margin-bottom: 32px;
}

Creates external space below the heading.

.card {
padding: 24px;
margin-bottom: 20px;
}

padding creates internal card spacing.

margin-bottom separates cards vertically.

MARGIN SHORTHAND SUMMARY

One value:

margin: 20px;

All sides = 20px

Two values:

margin: 20px 40px;

Top/Bottom = 20px
Left/Right = 40px

Three values:

margin: 10px 20px 30px;

Top = 10px
Left/Right = 20px
Bottom = 30px

Four values:

margin: 10px 20px 30px 40px;

Top = 10px
Right = 20px
Bottom = 30px
Left = 40px

PADDING SHORTHAND SUMMARY

One value:

padding: 20px;

Two values:

padding: 20px 40px;

Three values:

padding: 10px 20px 30px;

Four values:

padding: 10px 20px 30px 40px;

COMMON MISTAKES

CONFUSING MARGIN AND PADDING

Margin:

Outside the border.

Padding:

Inside the border.

USING MARGIN WHEN INTERNAL SPACE IS NEEDED

If text is touching the edge of a card, use padding.

Example:

.card {
padding: 20px;
}

USING PADDING TO SEPARATE TWO INDEPENDENT ELEMENTS

If you need external separation between elements, margin may be more appropriate.

FORGETTING SHORTHAND ORDER

Remember:

Top
Right
Bottom
Left

EXPECTING AUTO MARGIN TO CENTER EVERYTHING

margin: 0 auto;

is commonly used for horizontal centering of a block with constrained width and available horizontal space.

It is not a universal centering solution for every layout situation.

USING NEGATIVE PADDING

Invalid:

padding: -20px;

Padding cannot be negative.

OVERUSING NEGATIVE MARGINS

Negative margins can create confusing overlap and layout behavior if used without understanding their effect.

RANDOM SPACING VALUES

Avoid inconsistent spacing such as:

13px
29px
47px

unless the design specifically requires them.

Use a consistent spacing system.

FORGETTING DEFAULT BROWSER MARGINS

Headings, paragraphs and the body can have browser default styles.

Inspect these defaults when unexpected spacing appears.

NOT UNDERSTANDING MARGIN COLLAPSING

Adjacent vertical margins may collapse in normal block flow.

Do not always assume two vertical margins will simply be added together.

EXCESSIVE PADDING ON SMALL SCREENS

Example:

.section {
padding: 100px;
}

This may consume too much horizontal space on a small screen.

A better pattern may separate vertical and horizontal spacing:

.section {
padding: 80px 20px;
}

NEW & DIFFICULT WORDS

Margin = Space outside an element’s border.

Padding = Space between an element’s content and border.

Shorthand = A CSS syntax that sets multiple related values using one property.

TRBL = Top, Right, Bottom, Left.

Auto = A keyword that allows the browser to calculate a value according to CSS layout rules.

Centering = Positioning an element or content centrally.

Spacing = Empty space used to separate or organize content.

Negative Margin = A margin with a value below zero.

Margin Collapsing = CSS behavior where certain adjoining vertical margins combine rather than simply adding together.

Internal Spacing = Space inside an element, commonly created with padding.

External Spacing = Space outside an element, commonly created with margin.

Containing Block = The reference box used for certain CSS calculations.

Reset = CSS rules used to remove or normalize browser default styling.

Consistency = Using a predictable design system throughout a project.

IMPORTANT NOTES

Margin:

margin: 20px;

Padding:

padding: 20px;

Margin top:

margin-top: 20px;

Margin right:

margin-right: 20px;

Margin bottom:

margin-bottom: 20px;

Margin left:

margin-left: 20px;

Padding top:

padding-top: 20px;

Padding right:

padding-right: 20px;

Padding bottom:

padding-bottom: 20px;

Padding left:

padding-left: 20px;

Horizontal centering pattern:

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

Section spacing:

section {
padding: 80px 0;
}

Card spacing:

.card {
padding: 24px;
margin-bottom: 20px;
}

PRACTICE

Create a box with margin: 20px.
Create another box with padding: 20px.
Add a border to both boxes and compare the result.
Use margin-top.
Use margin-right.
Use margin-bottom.
Use margin-left.
Use all four padding properties.
Practice one-value shorthand.
Practice two-value shorthand.
Practice three-value shorthand.
Practice four-value shorthand.
Create a centered container using margin: 0 auto.
Create three cards with internal padding.
Add spacing between cards.
Test a negative margin.
Test percentage padding.
Create a consistent spacing scale.

ASSIGNMENT

Create a webpage called:

CSS Margin & Padding Practice

The page should contain:

Header
Navigation
Hero section
About section
Services section
Three cards
Call-to-action section
Footer

Requirements:

Use margin.
Use padding.
Use individual margin properties.
Use individual padding properties.
Use margin shorthand.
Use padding shorthand.
Use margin: 0 auto.
Create a centered container.
Add internal spacing to cards.
Add vertical spacing between sections.
Use a consistent spacing system.

MINI PROJECT

Create a simple services section.

HTML:

<div class="container">

    <h2>
        Our Services
    </h2>

    <div class="card">
        <h3>Web Development</h3>
        <p>
            Professional website development for businesses.
        </p>
    </div>

    <div class="card">
        <h3>SEO</h3>
        <p>
            Search engine optimization for better visibility.
        </p>
    </div>

    <div class="card">
        <h3>Digital Marketing</h3>
        <p>
            Digital marketing solutions for business growth.
        </p>
    </div>

</div>

CSS:

{
box-sizing: border-box;
}

body {
margin: 0;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.services {
padding: 80px 0;
}

.services h2 {
margin-top: 0;
margin-bottom: 32px;
}

.card {
padding: 24px;
margin-bottom: 20px;
background-color: #f1f5f9;
}

.card h3 {
margin-top: 0;
margin-bottom: 12px;
}

.card p {
margin: 0;
}

QUIZ

What is margin?

Answer:

Margin is the space outside an element’s border.

What is padding?

Answer:

Padding is the space between an element’s content and its border.

What is the main difference between margin and padding?

Answer:

Margin creates external space, while padding creates internal space.

What does this mean?

margin: 20px;

Answer:

All four sides receive a 20px margin.

What does this mean?

margin: 10px 20px;

Answer:

Top and bottom margins are 10px, while left and right margins are 20px.

What is the order of four-value shorthand?

Answer:

Top, Right, Bottom, Left.

What does this do?

margin: 0 auto;

Answer:

It sets top and bottom margins to 0 and left and right margins to auto. In an appropriate block layout with available horizontal space, it is commonly used to center an element horizontally.

Can padding use negative values?

Answer:

No.

Can margin use negative values?

Answer:

Yes.

What is margin collapsing?

Answer:

It is CSS behavior where certain adjoining vertical margins combine instead of simply adding together.

Does an element’s background normally paint its margin area?

Answer:

No.

Does an element’s background extend through its padding area?

Answer:

Yes.

INTERVIEW QUESTIONS

Q: What is the difference between margin and padding?

Answer:

Margin creates space outside an element’s border, while padding creates space between the content and the border.

Q: Explain CSS margin shorthand.

Answer:

Margin shorthand can accept one to four values.

One value applies to all sides.

Two values represent vertical and horizontal margins.

Three values represent top, horizontal and bottom.

Four values represent top, right, bottom and left.

Q: What does margin: 0 auto do?

Answer:

It sets vertical margins to zero and horizontal margins to auto. It is commonly used to horizontally center a block element when its width is constrained and free horizontal space exists.

Q: Can margins be negative?

Answer:

Yes. CSS margins can use negative values.

Q: Can padding be negative?

Answer:

No. Negative padding values are invalid.

Q: What is margin collapsing?

Answer:

Margin collapsing is a behavior in normal block layout where certain adjoining vertical margins combine rather than being added together.

Q: When should you use padding?

Answer:

Use padding when you need space between an element’s content and its border or visual edge.

Q: When should you use margin?

Answer:

Use margin when you need external spacing between an element and surrounding layout content.

CLASS SUMMARY

In Class 26, you learned CSS Margin & Padding.

You learned:

Margin
Padding
Margin vs Padding
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
Margin shorthand
Padding shorthand
margin: auto
Horizontal centering
Negative margins
Percentage spacing
rem-based spacing
Margin collapsing
Consistent spacing systems
Practical section and card spacing

Remember:

Margin = Outside

Padding = Inside

Four-value order:

Top → Right → Bottom → Left

Example:

.card {
margin: 20px;
padding: 24px;
}

Responsive centered container:

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

Understanding margin and padding is essential before learning the CSS Box Model in greater detail.

NEXT CLASS:

Class 027 — Border & CSS Box Model

Master CSS Margin & Padding: Control Website Spacing Like a Pro — Web Development Class 26

Web Development

Heading

Leave a Reply Cancel reply