CSS margin-right Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The margin-right CSS property determines the amount of space or gap to be added to the right side of an element within its containing element. It specifies the distance between the right edge of the element and the adjacent elements or the containing element's boundaries. This property is commonly used in layout design to create spacing or separation between elements, helping control the overall positioning and alignment of content within a web page or document. By adjusting the margin-right value, you can achieve various visual effects and layouts, ensuring proper spacing and organization of content on a webpage.

Initial value: 0
Applies to: All elements
Inherited: No
Computed value: As specified, but with relative lengths converted into absolute pixel values.
Animatable: Yes
JavaScript syntax: object.style.marginRight

Interactive Demo

Margin Right Example

Syntax

margin-right: <length> | <percentage> | auto

Values

<length>Specifies a fixed length, using any standard CSS length units. Negative Values are allowed.
<percentage>A percentage always relative to the width of the containing block.
inherit

Example

HTML

<div class="parent"> 

   <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 

</div>

CSS

.parent { 
   background: #e2edc1;
   padding: 10px;
} 
.child { 
   border: 3px solid #333391; 
   padding: 10px;
   margin: 10px;
   margin-right: 40px;
}

Result

Editor