CSS Margin

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;

Try It Now

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!