From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/margin-right/index.html | 208 ++++++++++++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 files/zh-cn/web/css/margin-right/index.html (limited to 'files/zh-cn/web/css/margin-right') diff --git a/files/zh-cn/web/css/margin-right/index.html b/files/zh-cn/web/css/margin-right/index.html new file mode 100644 index 0000000000..295e126588 --- /dev/null +++ b/files/zh-cn/web/css/margin-right/index.html @@ -0,0 +1,208 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS 属性 +translation_of: Web/CSS/margin-right +--- +

{{CSSRef}}

+ +

摘要

+ +

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

+ +

竖直排列相邻的两个盒子模型的外边距会重叠,称为 margin collapsing.

+ +

{{cssinfo}}

+ +

语法

+ +
/* <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;
+
+ +

+ +
+
<length>
+
一个固定宽度 {{cssxref("<length>")}}值: 可以是一个绝对宽度,e.g. in px, 也可以是一个相对宽度, e.g. in em, 或者相对视窗的大小,e.g. in vh.
+
<percentage>
+
以百分比为单位的margin值,计算时是相对于其最近的父级容器的宽度。
+
auto
+
auto关键词表示在当前布局模式下,浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right 设置为auto,那么最后计算的空间分布,会根据display,float,position属性,自动生成以下几种情况: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Value of {{cssxref("display")}}Value of {{cssxref("float")}}Value of {{cssxref("position")}}Computed value of autoComment
inline, inline-block, inline-tableanystatic or relative0Inline layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-captionanystatic or relative0, 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-captionleft or rightstatic or relative0Block layout mode (floating element)
any table-*, except table-captionanyany0Internal table-* elements don't have margins, use {{ cssxref("border-spacing") }} instead
any, except flex, inline-flex, or table-*anyfixed or absolute0, 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-flexanyany0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.Flexbox layout mode
+
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

实例

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

说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}{{ Spec2('CSS3 Transitions') }}Defines margin-right as animatable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{ Spec2('CSS3 Flexbox') }}Defines the behavior of margin-right on flex items.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin-right', 'margin-right') }}{{ Spec2('CSS1') }}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
-- cgit v1.2.3-54-g00ecf