CSS参考手册
基本框模型 | Basic Box Model
右边距 | 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 |
基本框模型 | Basic Box Model相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。