CSS - margin-right Property

The margin-right property sets the width of the margin at the right of an element.

The separation between neighbors increases with a positive value and decreases with a negative value

Possible Values

The following list covers all the possible values of margin-right property.

  • <length> - The fixed value of the margin's size.

  • <percentage> - The percentage of the margin measured in relation to the contained block's inline size, or the writing-mode defined width in a horizontal language.

  • auto - A percentage of the available horizontal space is allocated to the right margin, with the layout option selected playing a crucial part.

    The spacing between the margin-left and

    margin-right

    values is equal when both of them are set to auto.

Applies to

All elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.

Syntax

margin-right = <length-percentage> | auto

CSS margin-right - Basic Example

Here is an example where all the different values that can be passed to the margin-right CSS property:

<html>
<head>
<style>
   p {
      background-color: rgb(201, 238, 240);
      border: 1px solid black;
      width: fit-content;
   }

   .margin-px {
      margin-right: 30px;
   }

   .margin-perc {
      margin-right: 10%;
   }

   .margin-em {
      margin-right: 3em;
   }

   .margin-auto {
      margin-right: auto;
   }

   .margin-neg {
      margin-right: -10px;
   }
</style>
</head>
   
<body>
   <p class="margin-px">
      The right margin is 30px.
   </p>
   
   <p class="margin-perc">
      The right margin is 10%.
   </p>
   
   <p class="margin-em">
      The right margin is 3em.
   </p>
   
   <p class="margin-auto">
      The right margin will be set by the browser.
   </p>
   
   <p class="margin-neg">
      The right margin is -10px.
   </p>
</body>
</html>

inherit - when you want the right margin of a child element to match the right margin of its parent element, use the property inherit.

Note: inherit value can be used only on child elements and not on parent element.

CSS margin-right - Inherit

Here is an example where the margin-right of a child element is inherited from the parent element−

<html>
<head>
<style>
   .p {
      margin-right: 20%;
   }
   
   p.example {
      margin-right: inherit;
      border: 1px solid #4CAF50;
   }
</style>
</head>
<body>
<h3>margin-right property - inherit</h3> 
   <p>The margin-right is 20% for parent element.</p>
   <p class="example">A child element where the right margin is inherited from the parent (p) and is 20%.</p>
</body>
</html>
Advertisements