CssHow-ToBeginner · 3 min read

How to Set Margin in CSS: Simple Guide with Examples

In CSS, you set margin using the margin property to add space outside an element. You can specify margins for all sides at once or individually using margin-top, margin-right, margin-bottom, and margin-left.

📐

Syntax

The margin property controls the space outside an element's border. You can set it in several ways:

margin: 10px; sets all four sides to 10 pixels.
margin: 10px 20px; sets top and bottom to 10px, left and right to 20px.
margin: 10px 15px 5px 20px; sets top, right, bottom, and left individually.
Or use individual properties like margin-top, margin-right, margin-bottom, and margin-left.

css

/* Set margin for all sides */
div {
  margin: 10px;
}

/* Set vertical and horizontal margins */
div {
  margin: 10px 20px;
}

/* Set each side individually: top, right, bottom, left */
div {
  margin: 10px 15px 5px 20px;
}

/* Set margin-top only */
div {
  margin-top: 10px;
}

💻

Example

This example shows a box with different margins on each side using the margin shorthand property. The colored background helps you see the space outside the box.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 20px 40px 10px 5px; /* top right bottom left */
    border: 2px solid navy;
  }
  body {
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Output

A light blue square box with a navy border appears with a large space above (20px), even larger space on the right (40px), smaller space below (10px), and very small space on the left (5px) from the edges or other content.

⚠️

Common Pitfalls

Common mistakes when setting margins include:

Using negative margins unintentionally, which can overlap elements.
Forgetting that margin collapses vertically between adjacent elements, so top and bottom margins may combine.
Setting margin on inline elements like <span> which may not behave as expected.
Confusing padding (inside space) with margin (outside space).

css

/* Wrong: Negative margin causing overlap */
div {
  margin-top: -20px; /* This pulls the element up, overlapping others */
}

/* Right: Use positive margin for spacing */
div {
  margin-top: 20px;
}

📊

Quick Reference

Property	Description	Example Value
margin	Sets margin on all four sides	margin: 10px;
margin-top	Sets margin on the top side	margin-top: 15px;
margin-right	Sets margin on the right side	margin-right: 5px;
margin-bottom	Sets margin on the bottom side	margin-bottom: 20px;
margin-left	Sets margin on the left side	margin-left: 8px;

✅

Key Takeaways

Use the CSS margin property to add space outside elements.

You can set all sides at once or each side individually with margin-top, margin-right, margin-bottom, and margin-left.

Remember vertical margins between elements can collapse into one margin.

Avoid negative margins unless you want elements to overlap.

Margins do not add space inside elements; use padding for that.