CSS - margin-right 屬性

margin-right 屬性設定元素右側邊距的寬度。

使用正值會增加相鄰元素之間的間距，使用負值會減小間距。

可能的值

以下列表包含 margin-right 屬性的所有可能值。

<length> - 邊距大小的固定值。
<percentage> - 相對於包含塊的內聯大小測量的邊距百分比，或者在水平語言中 writing-mode 定義的寬度。
auto - 可用水平空間的百分比分配給右側邊距，所選佈局選項起著至關重要的作用。

margin-left 和
margin-right
值相等，當它們都設定為 auto 時。

應用於

所有元素，除了具有除 table-caption、table 和 inline-table 之外的表格 display 型別的元素。它也適用於 ::first-letter。

語法

margin-right = <length-percentage> | auto

CSS margin-right - 基本示例

這是一個示例，其中包含可以傳遞給 margin-right CSS 屬性的所有不同值

<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 - 當您希望子元素的右側邊距與其父元素的右側邊距匹配時，使用 inherit 屬性。

注意：inherit 值只能用於子元素，不能用於父元素。

CSS margin-right - 繼承

這是一個示例，其中子元素的 margin-right 繼承自父元素−

<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>

列印頁面