CSS Margin

CSS margin Property – Set Spacing Around Elements in CSS

The margin property in CSS is used to create space around elements, outside their border. It helps control the layout and spacing between elements on a webpage.

Syntax

You can set margins using the shorthand margin property or individual margin properties:

/* Shorthand property */
margin: top right bottom left;

/* Individual properties */
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;

Values

  1. Length:
    • Specifies a fixed margin size using units like px, em, rem, %, etc.
    • Example: 
      margin: 20px; /* 20px on all sides */

      Try It Now

  2. Percentage:
    • Calculates the margin as a percentage of the containing element’s width.
    • Example: 
      margin: 10%;

      Try It Now

  3. Auto:
    • Automatically adjusts the margin, often used for centering elements horizontally.
    • Example: 
      margin: 0 auto; /* Centers the element horizontally */

      Try It Now

  4. Inherit:
    • Inherits the margin value from the parent element.
    • Example: 
      margin: inherit;

      Try It Now

Shorthand Property

The margin shorthand can accept 1 to 4 values:

  1. One value:
    • Applies to all four sides.
    • Example: 
      margin: 10px;

      Try It Now

  2. Two values:
    • First value: Top and bottom.
    • Second value: Left and right.
    • Example: 
      margin: 10px 20px;

      Try It Now

  3. Three values:
    • First value: Top.
    • Second value: Left and right.
    • Third value: Bottom.
    • Example: 
      margin: 10px 20px 30px;

      Try It Now

  4. Four values:
    • Applies to top, right, bottom, and left in clockwise order.
    • Example: 
      margin: 10px 20px 30px 40px;

      Try It Now

Examples

Basic Margin

<div style="margin: 20px; background-color: lightblue;">Box with margin</div>

Try It Now

Different Margins for Each Side

<div style="margin: 10px 15px 20px 25px; background-color: lightgreen;">
  Box with specific margins
</div>

Try It Now

Centering an Element

<div style="width: 200px; margin: 0 auto; background-color: lightcoral;">
  Centered Box
</div>

Try It Now

Using Percentage Margins

<div style="margin: 5% 10%; background-color: lightgoldenrodyellow;">
  Box with percentage margins
</div>

Try It Now

Negative Margins

Margins can have negative values, which pull the element closer to its neighboring elements.

<div style="margin: -10px; background-color: lightpink;">
  Box with negative margin
</div>

Try It Now

Best Practices

  1. Avoid Overlapping Margins:
    • Adjacent vertical margins between elements can collapse (merge into one margin).
    • Example: 
      div {
  margin: 20px;
}

      Try It Now

      Two stacked div elements will have a total margin of 20px, not 40px.

  2. Use auto for Centering:
    • Horizontal centering works best with margin: 0 auto; and a defined width.
  3. Responsive Design:
    • Use relative units like % or em for flexible layouts.

Experiment

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin: 20px auto;
    }

    .custom-margin {
      margin: 10px 30px 50px 70px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="box">Box with auto margin</div>
  <div class="box custom-margin">Box with custom margins</div>
</body>
</html>

Try It Now

Practice with margin values to see how they affect layout!