margin-block-start和margin-top之间有什么区别? [英] What is the difference between margin-block-start and margin-top?

问题描述

试图了解两者在用法上的核心区别，但是我找不到详细说明这种比较的文章或文档.以此处提供的示例为前提，假设以下情况:

Trying to understand the core difference in usage between the two, but I fail to find an article or doc that details such a comparison. Taking the example provided here, assuming the following:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-block-start: 20px;
  background-color: #c8c800;
}

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

此实例与其中 margin-top <使用了href ="https://jsfiddle.net/wy8rh9kb/" rel ="noreferrer"> ，它很小(但是可见).

The difference between this instance, and one in which margin-top is used, is quite small (however visible).

规范指出 margin-block-start 取决于布局模型，而 margin-top 是指包含块的宽度.如果有人可以用外行的术语解释它，我会很乐意的.

The specifications state that margin-block-start depends on layout model while margin-top refer to the width of the containing block. Would love it if someone could explain it in layman's term.

推荐答案

来自官方 ¹

From the official¹ specification you can read:

这些属性对应于上边距，下边距，左边距和右边距的属性.映射取决于元素的书写方式，方向和文本方向.

These properties correspond to the margin-top, margin-bottom, margin-left, and margin-right properties. The mapping depends on the element’s writing-mode, direction, and text-orientation.

默认情况下，您将具有以下映射:

By default, you will have the following mapping:

margin-block-start = margin-top
margin-block-end = margin-bottom
margin-inline-start = margin-left
margin-inline-end = margin-right

示例:

.margin {
  margin-top:50px;
  margin-bottom:10px;
  margin-left:100px;
  margin-right:200px;
}

.margin-alt {
  margin-block-start:50px;
  margin-block-end:10px;
  margin-inline-start:100px; 
  margin-inline-end:200px; 
}

div {
  border:2px solid;
  padding:20px;
}

<div class="margin">
A
</div>
<hr>
<div class="margin-alt">
A
</div>

现在，如果我们更改书写模式，您将看到我们将具有不同的映射.

Now if we change the writing mode, you will see that we will have a different mapping.

.margin {
  margin-top:50px;
  margin-bottom:10px;
  margin-left:100px;
  margin-right:200px;
}

.margin-alt {
  margin-block-start:50px;
  margin-block-end:10px;
  margin-inline-start:100px; 
  margin-inline-end:200px; 
}

div {
  border:2px solid;
  padding:20px;
  writing-mode: vertical-lr;
}

<div class="margin">
A
</div>
<hr>
<div class="margin-alt">
A
</div>
<div class="margin-alt" style="writing-mode: vertical-rl;">
A
</div>

在上面，您将注意到在使用 vertical-lr 时等于的映射

In the above, you will notice when using vertical-lr a mapping equal to

margin-block-start = margin-left
margin-block-end = margin-right
margin-inline-start = margin-top 
margin-inline-end = margin-bottom 

以及使用 vertical-rl

margin-block-start = margin-right
margin-block-end = margin-left
margin-inline-start = margin-top 
margin-inline-end = margin-bottom

---

我不会详细说明所有情况，但是基本上每个 margin-*-* 属性都将根据的值映射到 margin-* 属性>写作模式，方向和文本方向.

---

I will not detail all the cases, but basically each margin-*-* property will be mapped to a margin-* property based on the values of writing-mode, direction, and text-orientation.

您可以使用不同的值来查看不同的情况.

You can play with the different values to see the different cases.

您的示例有点复杂，因为您要进行边际收缩，并且默认边际已应用于 p ，所以很难理解.

Your examples are a bit complex because you are having margin-collapsing and the default margin applied to p so it's difficult to understand.

这是一个更好的选择:

div:not([class]) {
  background-color: yellow;
  width: 120px;
  height: 120px;
  border:1px solid;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-block-start: 20px; /* we will end with a margin-left */
  background-color: #c8c800;
}
.exampleText2 {
  writing-mode: vertical-lr;
  margin-top: 20px; /* this will remain a margin-top */
  background-color: #c8c800;
}

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

<div>
  <div class="exampleText2">Example text</div>
</div>

¹ :您使用的链接是MDN页面，虽然参考不错，但不是官方规范.

¹: the link you are using is the MDN page which is a good reference but not the official specification.

这篇关于margin-block-start和margin-top之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！