CSS margin Property

The margin property creates empty space around an element, outside of any defined borders.

selector { margin: value; }
auto Allows the browser to calculate the margin automatically, often used for centering elements.
<length> Sets a fixed spacing using units like px, em, rem, or vh.
<percentage> Sets the margin as a percentage of the width of the containing element.
inherit Inherits the margin value from the parent element.

Code Examples

A basic example showing a box with a uniform margin that pushes away from other elements.

<div style="margin: 20px; border: 2px solid #333333; padding: 10px;">
  This box has a 20px margin on all sides.
</div>

An advanced example using auto margins for horizontal centering and JavaScript to dynamically adjust the top margin.

<div id="card" style="margin: 50px auto; width: 300px; border: 1px solid #cccccc; padding: 20px; transition: margin 0.3s;">
  <p>Centered card with auto margin.</p>
  <button onclick="toggleSpace()">Toggle Margin</button>
</div>

<script>
function toggleSpace() {
  const card = document.getElementById("card");
  if (card.style.marginTop === "100px") {
    card.style.marginTop = "50px";
  } else {
    card.style.setProperty("margin-top", "100px");
  }
}
</script>

Pro Tip

You can use negative margin values to pull an element closer to its neighbor or even overlap it. It is a powerful way to break out of a rigid layout grid without using absolute positioning.

Deep Dive

Think of margin as an element's personal bubble or social distancing space. It defines the distance between the element's border and the next neighbor in the layout. Unlike padding, which grows the inside of the box, margin stays on the outside and is transparent. It is a shorthand property that handles margin-top, margin-right, margin-bottom, and margin-left in one go. You can supply one value (all sides), two (top/bottom, right/left), three (top, right/left, bottom), or four (top, right, bottom, left). A good trick to remember the order is the "TRouBLe" mnemonic: Top, Right, Bottom, Left.

Best Practices

Use margin to create breathing room between distinct layout components. Stick to a consistent spacing scale (like 8px increments) to keep your design professional and balanced. Use "margin: auto" on block-level elements with a set width to center them horizontally within their parent container.

Common Pitfalls

Margin collapsing is the most common trap. When two vertical block elements sit on top of each other, their margins collapse into a single space equal to the largest margin, rather than adding together. Also, margins on inline elements only affect horizontal spacing; they won't push neighbors away vertically. Lastly, remember that percentage-based margins for top and bottom are calculated from the parent's width, not its height.

Accessibility

Margins help users with visual or cognitive impairments distinguish between different sections of content. Ensure enough white space exists so that clickable elements aren't too crowded, preventing accidental clicks.

Dev Data Table: margin property

default 0
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.margin = "20px";
js_syntax_2 element.style.setProperty("margin", "20px");
js_note When manipulating margin via JavaScript, remember that the property affects the space outside the element's border, which can trigger layout shifts.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }
results render here...