MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

摘要

The effect of the CSS margin-right property on the element boxmargin-right  属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。

竖直排列相邻的两个盒子模型的外边距会重叠,称为 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.
是否是继承属性
Percentagesrefer to the width of the containing block
适用媒体visual
计算值the percentage as specified or the absolute length
Animation typea length
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

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

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

Values

<length>
一个固定宽度 <length>值: 可以是一个绝对宽度,e.g. in px, 也可以是一个相对宽度, e.g. in em, 或者相对视窗的大小,e.g. in vh.
<percentage>
百分比值 <percentage> 是相对于最近的块容器的宽度 width
auto
auto关键词表示在当前布局模式下,浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right 设置为auto,那么最后计算的空间分布,会根据display,float,position属性,自动生成以下几种情况:
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 Model
margin-right
Working Draft No significant change
CSS Transitions
margin-right
Working Draft Defines margin-right as animatable.
CSS Flexible Box Layout Module
margin-right
Candidate Recommendation Defines the behavior of margin-right on flex items.
CSS Level 2 (Revision 1)
margin-right
Recommendation Removes its effect on inline elements.
CSS Level 1
margin-right
Recommendation Initial definition

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

文档标签和贡献者

标签: 
 此页面的贡献者: Vladimirrr666, ChuckZhang
 最后编辑者: Vladimirrr666,