margin-right

**margin-right** CSS 属性设置元素右侧的边距区域。正值表示将其放置得离其邻居更远，而负值表示将其放置得更近。

试试看

两个相邻盒子的垂直边距可能会融合。这称为边距折叠。

语法

css
/* <length> values */
margin-right: 20px; /* An absolute length */
margin-right: 1em; /* relative to the text size */
margin-right: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-right: auto;

/* Global values */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;

margin-right 属性指定为关键字 auto、<length> 或 <percentage>。其值可以为正、零或负。

值

<length>

边距的大小，作为固定值。

<percentage>

边距的大小，作为百分比，相对于writing-mode定义的内联大小（水平语言中的宽度）包含块。

auto

右侧边距获得未使用水平空间的一部分，这主要由使用的布局模式决定。如果margin-left 和 margin-right 的值都为 auto，则计算出的空间将平均分配。此表总结了不同情况

display 的值 float 的值 position 的值 auto 的计算值 注释
inline、inline-block、inline-table 任何 static 或 relative 0 内联布局模式
block、inline、inline-block、block、table、inline-table、list-item、table-caption 任何 static 或 relative 0，除非margin-left 和 margin-right 都设置为 auto。在这种情况下，它设置为在父元素内居中元素的值。 块级布局模式
block、inline、inline-block、block、table、inline-table、list-item、table-caption left 或 right static 或 relative 0 块级布局模式（浮动元素）
任何 table-*，除了 table-caption 任何 任何 0 内部 table-* 元素没有边距，请改用border-spacing
任何，除了 flex、inline-flex 或 table-* 任何 fixed 或 absolute 0，除非margin-left 和 margin-right 都设置为 auto。在这种情况下，如果固定，它设置为在可用width 内居中边框区域的值。 绝对定位布局模式
flex、inline-flex 任何 任何 0，除非存在任何正水平空闲空间。在这种情况下，它将平均分配到所有水平auto 边距。 Flexbox 布局模式

正式定义

初始值0
应用于所有元素，除了具有 table display 类型（不包括 table-caption、table 和 inline-table）的元素。它也适用于 ::first-letter。
继承否
百分比指的是包含块的宽度
计算值指定的百分比或绝对长度
动画类型一个长度

正式语法

margin-right = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>

示例

使用像素和百分比设置右侧边距

css
.content {
  margin-right: 5%;
}
.sidebox {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}

规范

规范
CSS 盒子模型模块级别 3
# margin-physical

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅