Tutorial Manthra

Margins are used to create space around elements, outside of any defined borders. While padding creates space inside an element, margins create the “breathing room” between different elements on a webpage.

Understanding the Margin Property

The margin property defines the outermost layer of the CSS Box Model. It is completely transparent and does not have a background color. Its primary purpose is to push neighboring elements away.

Individual Sides

You can control the margin for each side of an element independently using these properties:

• margin-top: Adds space above the element.
• margin-right: Adds space to the right of the element.
• margin-bottom: Adds space below the element.
• margin-left: Adds space to the left of the element.

Example Code:

.mar-container{
  background-color: #010d99;
}
p {
  margin-top: 100px;
  margin-bottom: 50px;
  margin-right: 20px;
  margin-left: 40px;
}

Output

The Margin Shorthand Property

To keep your code concise, you can use the margin shorthand property. The way it works depends on how many values you provide:

• Four Values : margin: top right bottom left; (Clockwise order from top)
  • margin: 10px 20px 30px 40px; (Top is 10, Right is 20, Bottom is 30, Left is 40)
• Three Values : margin: top horizontal bottom;
  • margin: 10px 20px 30px; (Top is 10, Left/Right are 20, Bottom is 30)
• Two Values : margin: vertical horizontal;
  • margin: 10px 20px; (Top/Bottom are 10, Left/Right are 20)
• One Value : margin: all-sides;
  • margin: 10px; (All four sides are 10px)

Example Code

.mar1{
  margin: 10px 20px 30px 40px;
}
.mar2{
   margin: 10px 20px 30px;
}
.mar3{
  margin: 10px 20px;
}
.mar4{
  margin: 10px;
}

Output

Margin Mix up Units

CSS does not restrict the usage of multiple units for specifying the margin value while specifying the shorthand property. That means you can use margin values in multiple units like pixels along with ems or inches, etc.

Example Code

.mar-mix{
    margin: 6ex 30px  1in 5em; 
}

Output

The auto Value (Centering Elements with CSS Margin)

You can set the margin property to auto to horizontally center an element within its container.

• Requirement: The element must have a specified width for auto to work.
• How it works: The browser splits the remaining available space equally between the left and right margins.

Example Code:

.center-box {
  width: 300px;
  margin: 0 auto; /* 0 top/bottom, auto left/right */
}

Output

Margin Collapse

A unique feature of margins is Margin Collapse. When the top and bottom margins of two vertical elements meet, they do not add together. Instead, the larger of the two margins survives, and the smaller one “collapses” into it.

Note: Margin collapse only happens with Top and Bottom margins. Left and Right margins never collapse.

Summary Table: CSS Margin Properties