learn2kode.in

Menu

CSS Tutorial

Menu

CSS Margin

Margins are used to create space outside the border of an element. They help control layout, spacing, and alignment between elements on a webpage. Margins are completely transparent and do not have background color.

What is Margin?

Margin is the space outside an element’s border. It affects how far the element stays from surrounding elements.

Example

Copy Text 
[ Margin ]
[ Border ]
[ Padding ]
[ Content ]

CSS Margin Properties

  • margin-top — sets the top margin
  • margin-right — sets the right margin
  • margin-bottom — sets the bottom margin
  • margin-left — sets the left margin
  • margin — shorthand for all four margins

Margin Value Types

You can set margins using:

  • px → fixed size
  • % → relative to container width
  • em / rem → relative to font-size
  • auto → browser calculates margin (commonly used to center elements)
  • inherit → takes margin from parent

Example: Setting Individual Margins

Copy Text 
.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 5px;
}

Example: Shorthand Margin

Copy Text 
.box {
  margin: 20px 10px 30px 5px; /* top right bottom left */
}

Other shorthand forms:

  • margin: 20px; → all sides 20px
  • margin: 20px 10px; → top-bottom 20px, left-right 10px
  • margin: 20px 10px 5px; → top 20, left-right 10, bottom 5

Centering with Margin Auto

Copy Text 
.container {
  width: 300px;
  margin: 0 auto;
}

This centers the element horizontally.

HTML Table for CSS Margin Properties

Property Description
margin-top Sets the top margin
margin-right Sets the right margin
margin-bottom Sets the bottom margin
margin-left Sets the left margin
margin Shorthand for all margin properties
CSS Padding