CSS - margin-right 屬性

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

語法

margin-right: auto | length | percentage | initial | inherit;

屬性值

值	描述
auto	瀏覽器自動設定右側邊距。預設值。
長度	使用長度單位（例如 px、em、rem 等）設定右側邊距。允許負值。
百分比	使用百分比值（例如 10%）相對於包含元素設定右側邊距。
initial	將其屬性設定為預設值。
inherit	從父元素繼承該屬性。

CSS margin-right 屬性示例

以下示例使用不同的值解釋了margin-right 屬性。

使用 auto 值的 margin-right 屬性

要允許瀏覽器根據可用空間自動計算右側邊距，我們使用auto 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 70px;
         width: 490px;
         border: 2px solid gray;
         direction: rtl;
      }

      .box {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
         margin-right: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-right property
   </h2>
   <h4>
      margin-right: auto;
   </h4>
   <div class="container">
      <div class="box">
         This box has margin-right: auto
      </div>
   </div>

</body>

</html>

使用長度值的 margin-right 屬性

要設定右側邊距，我們可以使用長度單位（例如 px、em、rem 等）指定邊距大小。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 70px;
         width: 490px;
         border: 2px solid gray;
         direction: rtl;
      }

      .props {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
      }

      .box1 {
         margin-right: 80px;
      }

      .box2 {
         margin-right: 10em;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-right property
   </h2>
   <h4>
      margin-right: 80px;
   </h4>
   <div class="container">
      <div class="box1 props">
         This box has margin-right: 80px
      </div>
   </div>
   <h4>
      margin-right: 10em;
   </h4>
   <div class="container">
      <div class="box2 props">
         This box has margin-right: 10em
      </div>
   </div>

</body>

</html>

使用百分比值的 margin-right 屬性

要設定右側邊距，我們可以使用百分比值（例如 10%（包含元素寬度的 10%））指定邊距大小。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 90px;
         width: 490px;
         border: 2px solid gray;
         direction: rtl;
      }

      .props {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
      }

      .box1 {
         margin-right: 20%;
      }

      .box2 {
         margin-right: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-right property
   </h2>
   <h4>
      margin-right: 20%;
   </h4>
   <div class="container">
      <div class="box1 props">
         This box has margin-right: 20% 
         of the width of the container
      </div>
   </div>
   <h4>
      margin-right: 50%;
   </h4>
   <div class="container">
      <div class="box2 props">
         This box has margin-right: 50% 
         of the width of the container
      </div>
   </div>

</body>

</html>

支援的瀏覽器

屬性
margin-right	1.0	6.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面