CSS Margins

CSS CODES & EXAMPLES

CSS Margins

Learn how to control the space outside HTML elements using CSS margins. Understand margin properties, shorthand, auto margins, individual sides, negative margins and practical website layouts.

← CSS Borders Start Learning →

What are CSS Margins?

Control the space outside an element

CSS margin properties are used to create space around the outside of an HTML element. Margin separates one element from another.

Important Properties:margin margin-top margin-right margin-bottom margin-left margin: auto

Basic Margin

Create space around an element

The margin property creates space outside an element.

basic-margin.css

.box {
  margin: 30px;
}

margin: 30px

Margin Top

Add space above an element

margin-top.css

.box {
  margin-top: 40px;
}

Element

Individual Margin Sides

Control each side separately

You can set margin independently for the top, right, bottom and left sides of an element.

individual-margin.css

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

TOP
20px

RIGHT
30px

BOTTOM
40px

LEFT
50px

ELEMENT

Margin Shorthand — Two Values

Set vertical and horizontal margins together

margin-two-values.css

.box {
  margin: 20px 40px;
}

20px Top & Bottom

40px Left & Right

When two values are used, the first value applies to top and bottom, while the second applies to left and right.

Margin Shorthand — Three Values

Control top, horizontal and bottom spacing

Margin Shorthand — Four Values

Set all four sides in one declaration

margin-four-values.css

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

10px TOP

20px RIGHT

30px BOTTOM

40px LEFT

Four values follow the clockwise order: Top → Right → Bottom → Left.

Margin Auto

Center a block element horizontally

margin-auto.css

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

margin: 0 auto

margin: 0 auto; is commonly used to center a fixed-width block element horizontally.

Centered Website Container

A common real-world layout pattern

container.css

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

CONTAINER

Professional Website Content

The container is centered automatically using margin: 0 auto;.

Negative Margin

Move an element closer or overlap another element

negative-margin.css

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

Background Section

Negative Margin Element

Negative margins can pull an element toward another element. Use them carefully because excessive negative spacing can make layouts difficult to maintain.

Margin Collapse

Understand vertical margins between block elements

In normal block formatting, vertical margins of adjacent block elements can collapse. The larger margin generally determines the resulting space instead of simply adding both margins.

margin-collapse.css

.first {
  margin-bottom: 30px;
}

.second {
  margin-top: 20px;
}

First Element

Second Element

Vertical margins can collapse

Card Spacing with Margin

Use margins to separate cards

Computer Fundamentals

Learn essential computer concepts and practical skills.

COURSE

Microsoft Word

Learn document creation and professional formatting.

COURSE

Microsoft Excel

Learn spreadsheets, formulas and data management.

Section Spacing

Create clean website sections

section-spacing.css

.section {
  margin-bottom: 50px;
}

Section One

Content of the first section.

Section Two

Content of the second section.

Margin Auto with Flexbox

Push an element to the opposite side

flex-margin-auto.css

.navbar {
  display: flex;
}

.right {
  margin-left: auto;
}

SNCEC

Home Courses

In a flex container, margin-left: auto; can push an item toward the right side.

Responsive Margins

Change spacing for smaller screens

responsive-margin.css

.section {
  margin: 60px 30px;
}

@media (max-width: 600px) {
  .section {
    margin: 30px 15px;
  }
}

Desktop Spacing

Mobile Spacing

CSS Margins Live Preview

Run a complete margin example

LIVE PREVIEW

CSS Margins Quick Reference

Important margin properties at a glance

Property	Example	Purpose
margin	`margin: 20px;`	Set margin on all sides
margin-top	`margin-top: 20px;`	Space above
margin-right	`margin-right: 20px;`	Space on the right
margin-bottom	`margin-bottom: 20px;`	Space below
margin-left	`margin-left: 20px;`	Space on the left
margin: 0 auto	`margin: 0 auto;`	Center a block
Negative Margin	`margin-top: -20px;`	Pull an element closer