CSS margin-right Property

What You’ll Learn

The margin-right property adds outer space on the right side of an element. It is one of the most common tools for horizontal spacing between row items in CSS.

Introduction

The margin-right property in CSS is used to set the right margin of an element. This property allows you to create space to the right of an element, separating it from content on its right.

Margins are essential for controlling the layout and spacing of elements on a web page, providing a clean and organized appearance.

Definition and Usage

Apply margin-right when you need spacing on only the right side without changing top, left, or bottom margins. It is ideal for gaps between horizontal items, spacing around floated content, and creating separation in toolbars and tag lists.

📝 Syntax

The syntax for the margin-right property is straightforward. You can specify the value using different units, such as pixels (px), percentages (%), ems (em), and more.

element {
  margin-right: value;
}

Here, value can be a length, percentage, or one of the global values (inherit, initial, unset).

Basic Example

p {
  margin-right: 20px;
}

💎 Property Values

🎯 Default Value

The default value of the margin-right property is 0, meaning no extra space is added to the right of the element. Override it when you need spacing on the right outer edge.

Examples Gallery

Add right margin to a paragraph, space horizontal row items, separate cards in a row, and compare with the logical equivalent.

<style>
  .text {
    margin-right: 20px;
  }
</style>

<p class="text">This paragraph has a margin of 20px on the right.</p>
<p>This paragraph does not have a custom margin-right value.</p>

.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #dbeafe;
  margin-right: 0.5rem;
}

.card {
  display: inline-block;
  width: 120px;
  padding: 1rem;
  background: #f1f5f9;
  margin-right: 1.5rem;
}

/* Physical */
.note {
  margin-right: 1.5rem;
}

/* Logical equivalent in horizontal LTR */
.note {
  margin-inline-end: 1.5rem;
}

margin-right in the Box Model

Margin sits outside the border. Right margin specifically adds transparent space on the right side of the element:

• Content — text or child elements inside the box.
• Padding — inner space between content and border.
• Border — the visible edge.
• Margin-right — outer space on the right side of the border.

♿ Accessibility

• Keep spacing meaningful — Right margin separates row items without breaking semantics.
• Do not rely on empty elements for spacing — Use margin instead of blank divs.
• Test zoomed layouts — Large right margins can push content off-screen on small viewports.
• Consider RTL layouts — Use logical properties when direction may change.
• Combine with semantic HTML — Margins adjust spacing; structure still comes from proper elements.

💡 Best Practices