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-block/index.html | 96 +++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 files/zh-cn/web/css/margin-block/index.html (limited to 'files/zh-cn/web/css/margin-block/index.html') diff --git a/files/zh-cn/web/css/margin-block/index.html b/files/zh-cn/web/css/margin-block/index.html new file mode 100644 index 0000000000..696903ab8f --- /dev/null +++ b/files/zh-cn/web/css/margin-block/index.html @@ -0,0 +1,96 @@ +--- +title: margin-block +slug: Web/CSS/margin-block +translation_of: Web/CSS/margin-block +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

margin-block这个CSS属性定义了一个元素的逻辑块开始和结束边距,根据元素的写入模式、 方向性和文本方向映射到物理边界。

+ +
/* 有长度的具体的值 */
+margin-block: 10px 20px;  /* 一个绝对的长度值 */
+margin-block: 1em 2em;   /* 相对于文本大小的值 */
+margin-block: 5% 2%;    /* 相对于最近的块容器宽度的值 */
+margin-block: 10px; /* 设置开始值和结束值 */
+
+/* 关键字 值 */
+margin-block: auto;
+
+/* 全局 值 */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+
+ +

这些值对应的是{{CSSxRef("margin-top")}}和{{CSSxRef("margin-bottom")}},或者 {{CSSxRef("margin-right")}},和{{CSSxRef("margin-left")}},这些属性取决于{{CSSxRef("writing-mode")}},{{CSSxRef("direction")}},和{{CSSxRef("text-orientation")}}。

+ +

这些值可以单独设置为{{CSSxRef("margin-block-start")}}和{{CSSxRef("margin-block-end")}}。inline direction属性是{{CSSxRef("margin-inline")}},也可设置为{{CSSxRef("margin-inline-start")}},和{{CSSxRef("margin-inline-end")}}。

+ +

语法

+ +

+ +

margin-block属性采用和{{CSSxRef("margin-left")}}属性相同的值。

+ +

正规语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

HTML 部分

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS 部分

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+ +

{{CSSInfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.margin-block")}}

+ +

请参考

+ + -- cgit v1.2.3-54-g00ecf