margin-right

Definition

The margin-right property sets the right margin of an element. It specifies the space between the element's right edge and the adjacent elements in the document flow. A positive value moves the element to the left, while a negative value moves the element to the right.

Examples

Set the right margin of a paragraph to 50 pixels:

p {
  margin-right: 50px;
}

Set the right margin of an image to auto to center it horizontally:

img {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

Set different right margins for different levels of nested divs:

div {
  margin-right: 20px;
}
div div {
  margin-right: 40px;
}
div div div {
  margin-right: 60px;
}

Values

Best Practices

• Avoid using negative margin values whenever possible, as they can cause elements to overlap and make the layout difficult to read.
• Use the margin shorthand property instead of setting margin-right separately, especially if you need to set multiple margin values.
• Don't use margin-right to create columns in a layout. Instead, use CSS grid or flexbox for this purpose.
• Use relative units (ems, rems, etc.) instead of pixels for more flexible layouts that adapt to different screen sizes and devices.
• Consider using a CSS preprocessor like Sass or Less to simplify the process of setting margin values and avoid repetitive code.

Browser Compatibility