1. css
  2. /properties
  3. /margin-right



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.


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;


<length>Specifies a fixed length for the margin in pixels, ems, rems, etc.
<percentage>Specifies a percentage of the width of the containing element.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera