右边距 | margin-right
margin-right
margin-right 属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。
/* <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: unset;
竖直排列相邻的两个盒子模型的外边距会重叠，称为 margin collapsing.
| 初始值 | 0 |
|---|---|
| 适用元素 | all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width of the containing block |
| 适用媒体 | visual |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
该margin-right属性被指定为关键字auto，或a <length>或a <percentage>。它的值可以是正值，零值或负值。
值
<length>边缘的大小为固定值。<percentage>边距的大小，以百分比为单位，相对于包含块的宽度。auto右边距接收未使用的水平空间的份额，主要由所使用的布局模式确定。如果值margin-left和margin-right均auto，计算出的空间分布均匀。本表总结了不同的情况：
| Value of display | Value of float | Value of position | Computed value of auto | Comment |
|---|---|---|---|---|
| inline, inline-block, inline-table | any | static or relative | 0 | Inline layout mode |
| block, inline, inline-block, block, table, inline-table, list-item, table-caption | any | static or relative | 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent. | Block layout mode |
| block, inline, inline-block, block, table, inline-table, list-item, table-caption | left or right | static or relative | 0 | Block layout mode (floating element) |
| any table-*, except table-caption | any | any | 0 | Internal table-* elements don't have margins, use border-spacing instead |
| any, except flex, inline-flex, or table-* | any | fixed or absolute | 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed. | Absolutely positioned layout mode |
| flex, inline-flex | any | any | 0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins. | Flexbox layout mode |
正式语法
<length> | <percentage> | auto
示例
.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo { margin-right: -5px; }
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Basic Box ModelThe definition of 'margin-right' in that specification. | Working Draft | No significant change |
| CSS TransitionsThe definition of 'margin-right' in that specification. | Working Draft | Defines margin-right as animatable. |
| CSS Flexible Box Layout ModuleThe definition of 'margin-right' in that specification. | Candidate Recommendation | Defines the behavior of margin-right on flex items. |
| CSS Level 2 (Revision 1)The definition of 'margin-right' in that specification. | Recommendation | Removes its effect on inline elements. |
| CSS Level 1The definition of 'margin-right' in that specification. | Recommendation | Initial definition. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
| auto value | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |
