CSS margin-right Property

The margin-right property creates space on the right side of an element, pushing adjacent elements further away. It acts as an external buffer outside the element's border.

selector { margin-right: value; }
<length> Specifies a fixed distance using units like px, em, or rem.
<percentage> Defines the margin as a percentage of the width of the containing element.
auto Allows the browser to automatically calculate the right margin space.
inherit Inherits the margin-right value from the parent element.

Code Examples

A basic example showing how to use margin-right to create space between two buttons.

<div style="background-color: #f4f4f4; padding: 20px;">
  <button style="margin-right: 30px; background-color: #007bff; color: #ffffff; border: none; padding: 10px;">Save Changes</button>
  <button style="background-color: #6c757d; color: #ffffff; border: none; padding: 10px;">Cancel</button>
</div>

An advanced example using JavaScript to dynamically update the margin-right property on a hover event, demonstrating how it affects layout flow.

<div id="ui-container" style="display: flex; background-color: #222222; padding: 40px;">
  <div id="active-box" style="width: 100px; height: 100px; background-color: #ff5733; margin-right: 20px; transition: margin 0.3s;"></div>
  <div style="width: 100px; height: 100px; background-color: #33ff57;"></div>
</div>

<script>
  const box = document.getElementById("active-box");
  box.addEventListener("mouseover", function() {
    this.style.marginRight = "100px";
    this.style.backgroundColor = "#ffffff";
  });
  box.addEventListener("mouseout", function() {
    this.style.marginRight = "20px";
    this.style.backgroundColor = "#ff5733";
  });
</script>

Pro Tip

If you want to push an element all the way to the right side of a flex container, you can actually use margin-left: auto; instead of messing with margin-right. To quickly debug why a margin isn't behaving, use the browser's Inspect Tool to see the orange-colored area in the box model view—that's your margin.

Deep Dive

Think of margin-right as an element's "personal bubble" on its right side. While padding handles the internal space between content and its border, margin handles the social distancing between the element and its neighbors. In the CSS Box Model, margins are the outermost layer. When you apply a right margin, you aren't changing the width of the box itself, you are just telling the browser to leave a specific amount of empty space before the next element can start. If you use a percentage, remember that the browser calculates that number based on the width of the parent container, not the element you are styling. Negative values are also valid; they act like a magnet, pulling neighboring elements closer or even causing them to overlap.

Best Practices

Stick to relative units like rem or em for your margins so the layout stays proportional when users scale their text. It is also wise to maintain a consistent spacing system (like multiples of 4px or 8px) to keep the UI looking professional. Instead of applying margin-right to every item in a list, consider using the "gap" property on a flex or grid container for cleaner code and easier maintenance.

Common Pitfalls

A common point of confusion is that margin-right may appear to do nothing on inline elements like <span> or <a> unless you change their display to block or inline-block. Also, keep an eye out for "Margin Collapsing," though this typically happens with top and bottom margins, not right and left. If you are working in a right-to-left language layout, hardcoding margin-right might break the design; in those cases, use margin-inline-end instead.

Accessibility

While margins don't directly affect screen readers, they are critical for visual accessibility. Proper spacing prevents a "wall of text" or "cluttered UI" feel, which helps users with cognitive disabilities or visual impairments distinguish between different functional areas of your page.

Dev Data Table: margin-right property

default 0
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.marginRight = "20px";
js_syntax_2 element.style.setProperty("margin-right", "20px");
js_note In JavaScript, you must use the camelCase property name marginRight when interacting with the style object directly.
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...