CSS margin-bottom Property

The margin-bottom property defines the vertical space required on the exterior bottom of an element. It is used to push neighboring elements further down the page, creating separation between components.

selector { margin-bottom: value; }
0 The default value that applies no vertical space below the element.
<length> Sets a fixed distance using units like px, pt, em, or rem.
<percentage> Sets the margin as a percentage relative to the width of the containing block.
auto Allows the browser to calculate the bottom margin automatically based on the layout context.

Code Examples

A basic example showing how margin-bottom creates a physical gap between two div elements.

<div style="background-color: #333333; color: #ffffff; padding: 20px; margin-bottom: 40px;">
  This box has a 40px margin on the bottom.
</div>
<div style="background-color: #eeeeee; padding: 20px;">
  This box is pushed down by the margin of the element above it.
</div>

An advanced example using JavaScript to dynamically increase the bottom margin of a notification box when a user interacts with the page.

<div id="alertBox" style="border: 2px solid #ff0000; padding: 15px; margin-bottom: 20px;">
  Warning: System update required.
</div>
<button onclick="expandMargin()">Add More Space</button>

<script>
function expandMargin() {
  const alert = document.getElementById("alertBox");
  alert.style.marginBottom = "100px";
  alert.style.backgroundColor = "#fff0f0";
}
</script>

Pro Tip

If you need to move an element up into its parent or overlap a header, use a negative margin-bottom. It is a handy trick for creative layouts where elements need to break the standard grid flow. Also, if you find yourself setting margins on every single item in a list, consider using the gap property on a Flex or Grid container instead to manage spacing more cleanly.

Deep Dive

Think of margin-bottom as an invisible force field beneath your element. In the CSS Box Model, the margin is the outermost layer, sitting outside the border. Unlike padding, which grows the element from the inside, margin creates distance between the element and its siblings. When you apply a positive value, you are pushing the next element away. If you apply a negative value, you effectively pull the following element upward, which can cause elements to overlap. A key technical detail is that for non-replaced inline elements, like a standard span, vertical margins do not have an effect unless the display property is changed to something like inline-block or block.

Best Practices

Use relative units like rem or em for your margins so the layout scales naturally when users change their browser font size. Maintain a consistent vertical rhythm by using a standardized spacing scale, such as multiples of 8px, across your entire project. This keeps the design looking clean and intentional rather than haphazard.

Common Pitfalls

The most frequent headache with vertical margins is Margin Collapsing. If two vertical elements meet, their margins don't always add up; instead, the browser might collapse them into a single margin equal to the largest of the two. Also, beginners often get confused by percentages; margin-bottom percentages are calculated based on the width of the parent container, not the height.

Accessibility

While margin-bottom is a visual tool, it plays a role in accessibility by providing clear visual separation between content sections. Proper spacing helps users with cognitive or visual impairments distinguish where one piece of information ends and the next begins. Avoid using excessive margins that force users with low-vision zoom settings to scroll excessively to find content.

Dev Data Table: margin-bottom property

default 0
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 object.style.marginBottom = "20px";
js_syntax_2 object.setProperty("margin-bottom", "20px");
js_note Ensure you use camelCase notation (marginBottom) when accessing the property directly through the style object in JavaScript.
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.1 }
results render here...