CSS margin-top Property

Sets the amount of empty space required above an element, pushing it down away from its neighbors or parent container.

selector { margin-top: value; }
auto The browser calculates a top margin automatically based on the layout context.
<length> Sets a fixed top margin using specific units like px, em, rem, or cm.
<percentage> Defines the top margin as a percentage relative to the width of the containing block.

Code Examples

A basic example showing a child element using margin-top to create distance from the top edge of its parent container.

<div style="border: 2px solid #333333; padding: 10px;">
  <div style="margin-top: 50px; background: #008080; color: #ffffff; padding: 10px;">
    This box is pushed 50px away from the top of its parent.
  </div>
</div>

An advanced example using a JavaScript function to dynamically update the margin-top property and change the layout on the fly.

<div id="content_stack">
  <div id="header_box" style="height: 60px; background: #222222; color: #ffffff;">Header</div>
  <div id="dynamic_box" style="height: 100px; background: #ff9900; transition: margin-top 0.5s;">Target Element</div>
</div>

<button onclick="applyGap()">Add Space</button>

<script>
function applyGap() {
  const box = document.getElementById("dynamic_box");
  box.style.marginTop = "40px";
  box.style.backgroundColor = "#00ff00";
}
</script>

Pro Tip

You can use negative values for margin-top to pull an element upward. This is a handy trick for overlapping elements or fine-tuning layouts without having to resort to relative or absolute positioning which can sometimes break the flow of the document.

Deep Dive

Think of margin-top as the personal space an element demands from whatever is sitting above it. It is the outermost layer of the CSS Box Model, sitting outside of the border and padding. Unlike padding, margins are always transparent and do not show the element's background color. A unique behavior to watch for is that percentage values for margin-top are calculated based on the width of the parent container, not the height. This might seem counterintuitive, but it ensures consistent spacing in responsive layouts where widths are more predictable than heights.

Best Practices

Use margin-top to establish vertical rhythm between sections of your page. Stick to relative units like rem or em so your spacing scales naturally when users change their browser's default font size. Avoid using large positive or negative margins to hack elements into position; if you find yourself doing that, you should probably be using Flexbox or Grid instead.

Common Pitfalls

The most common headache is Margin Collapsing. If you have two elements stacked, and the top one has a margin-bottom and the bottom one has a margin-top, they don't add together. Instead, the smaller margin collapses into the larger one. Also, remember that margin-top has no effect on non-replaced inline elements, like a standard span or anchor tag, unless you change their display to block or inline-block.

Accessibility

While margins don't affect screen readers directly, they are vital for visual accessibility. Providing enough white space between elements helps users with cognitive disabilities or visual impairments distinguish between different blocks of content. Never use margin to imply a relationship between elements that isn't clearly defined in the HTML structure.

Dev Data Table: margin-top property

default 0
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.marginTop = "20px";
js_syntax_2 element.style.setProperty("margin-top", "20px");
js_note In JavaScript, the property is camelCased to marginTop because hyphens are interpreted as subtraction operators.
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...