margin-right

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

margin-right CSS 属性设置元素右侧的外边距区域。正值使其远离相邻元素,负值使其更加靠近。

尝试一下

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

语法

css
/* <length> 值 */
margin-right: 20px; /* 绝对长度 */
margin-right: 1em; /* 相对于文本大小 */
margin-right: 5%; /* 相对于最近的块级容器的宽度 */

/* 关键字值 */
margin-right: auto;

/* 全局值 */
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-leftmargin-right 的值都是 auto,则最后计算的空间是均匀分布的。下表总结了不同的情况:

display 的值 float 的值 position 的值 auto 的计算值 注释
inlineinline-blockinline-table 任意 staticrelative 0 行级布局模式
blockinlineinline-blockblocktableinline-tablelist-itemtable-caption 任意 staticrelative 0,除非将 margin-leftmargin-right 都设置为 auto。在这种情况下,它被设置为将元素置于其父级元素中心的值。 块级布局模式
blockinlineinline-blockblocktableinline-tablelist-itemtable-caption leftright staticrelative 0 块级布局模式(浮动元素)
table-* 中的任意一个,除了 table-caption 任意 任意 0 内部的 table-* 元素没有外边距,请使用 border-spacing 代替。
任意,除了 flexinline-flex table-* 任意 fixedabsolute 0,除非将 margin-leftmargin-right 都设置为 auto。在这种情况下,如果 width 固定,它会被设置为将边框区域在可用宽度内居中的值。 绝对定位布局模式
flexinline-flex 任意 任意 0,除非存在任何正水平可用空间。在这种情况下,它会均匀分配到所有水平的 auto 外边距中。 弹性盒布局模式

形式定义

初始值0
适用元素all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
是否是继承属性
Percentagesrefer to the width of the containing block
计算值the percentage as specified or the absolute length
动画类型a length

形式语法

margin-right = 
<length-percentage> |
auto |
<anchor-size()>

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

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

示例

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

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

规范

Specification
CSS Box Model Module Level 3
# margin-physical

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-right
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见