CSS MARGIN

CSS Margin

The margin property is used to create space outside an HTML element. It controls the distance between an element and the elements around it.

1. Basic example

div {
  margin: 20px;
}

This creates 20px of space on all four sides:

        20px
    ┌─────────────┐
20px│   CONTENT   │20px
    └─────────────┘
        20px

---

2. Four margin properties

You can set each side separately:

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
margin-top → space above
margin-right → space on the right
margin-bottom → space below
margin-left → space on the left

Meaning:

---

3. Margin shorthand

Instead of writing four properties, you can use margin.

One value

.box {
  margin: 20px;
}
top    = 20px
right  = 20px
bottom = 20px
left   = 20px

Applies to all four sides:

Two values

.box {
  margin: 10px 20px;
}
top    = 10px
bottom = 10px
left   = 20px
right  = 20px

The first value is top/bottom, and the second is left/right.

Three values

.box {
  margin: 10px 20px 30px;
}
top    = 10px
left   = 20px
right  = 20px
bottom = 30px

They mean:

Four values

.box {
  margin: 10px 20px 30px 40px;
}

The order is:

Top → Right → Bottom → Left

A useful way to remember it is clockwise:

       TOP
        10
   ┌───────────┐
40 │           │ 20
   └───────────┘
        30
      BOTTOM

---

4. margin: auto

One of the most useful applications is centering an element horizontally.

.box {
  width: 500px;
  margin: 0 auto;
}

Here:

• 0 → no top/bottom margin

• auto → browser automatically distributes left/right space

For example:

<div class="box">Hello World</div>
.box {
  width: 500px;
  margin: 0 auto;
  background-color: lightblue;
}

The box will be centered horizontally.

---

5. Margin vs Padding

This is very important when learning CSS.

       MARGIN
  ┌───────────────────┐
  │     BORDER        │
  │  ┌─────────────┐  │
  │  │   PADDING   │  │
  │  │  ┌───────┐  │  │
  │  │  │CONTENT│  │  │
  │  │  └───────┘  │  │
  │  └─────────────┘  │
  └───────────────────┘

Margin

Space outside the element:

.box {
  margin: 20px;
}

Padding

Space inside the element:

.box {
  padding: 20px;
}
.box {
  margin: 30px;
  padding: 20px;
  border: 2px solid black;
}
margin separates the box from other elements.
padding separates the content from the box's border.

For example:

---

6. Different units

Margins can use different CSS units:

.box {
  margin: 20px;
}
.box {
  margin: 2rem;
}
.box {
  margin: 5%;
}

You can also use:

Common units include:

Unit	Example	Meaning
px	20px	Pixels
%	10%	Percentage
em	2em	Relative to font size
rem	2rem	Relative to root font size
auto	auto	Browser calculates the margin

---

7. Negative margin

CSS also allows negative margins:

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

This can cause an element to move closer to or overlap another element.

Use negative margins carefully because they can make layouts harder to understand.

---

8. Margin collapsing

An important CSS concept is margin collapsing.

For example:

h1 {
  margin-bottom: 30px;
}
p {
  margin-top: 20px;
}
30px
30px + 20px = 50px

You might expect 50px between them, but for certain block elements, the vertical margins can collapse, meaning the resulting space may be the larger margin rather than the sum.

In this example, it can result in approximately:

rather than:

Margin collapsing mainly concerns vertical margins of block-level elements.

---

9. Practical example

HTML:

<div class="card">
  <h2>CSS Margin</h2>
  <p>Margin creates space outside an element.</p>
  <button>Learn More</button>
</div>
.card {
  width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 2px solid black;
}
.
.card h2 {
  margin-bottom: 15px;
}
.
.card p {
  margin-bottom: 20px;
}
.
.card button {
  margin-top: 10px;
}

CSS:

Here:

• margin: 50px auto centers the card and gives it top/bottom space.

• margin-bottom: 15px separates the heading from the paragraph.

• margin-bottom: 20px separates the paragraph from the button.

• margin-top: 10px adds space above the button.

Quick rule to remember

Margin = outside space

Padding = inside space
Border = boundary
Content = actual text/image/etc.

If you're learning CSS from the beginning, the CSS Box Model is the next concept you should understand because margin, padding, border, width, and height all work together.