margin-block-start 和 margin-top 有什么区别？

Question

试图了解两者在用法上的核心区别，但我找不到详细介绍此类比较的文章或文档。以此处提供的示例为例，假设如下：

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 使用的实例之间的差异非常小（但可见）。

的规格状态margin-block-start 取决于布局模型而margin-top 指的是包含块的宽度。如果有人可以用外行的术语解释它，我会喜欢它。

Answer 1

从官方¹ 规范中，您可以阅读：

这些属性对应于 margin-top、margin-bottom、margin-left 和 margin-right 属性。映射取决于元素的书写模式、方向和文本方向。

默认情况下，您将拥有以下映射：

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

例子：

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>

.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;
}

在上面，您会注意到当使用vertical-lr 映射等于

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-*基于的价值属性writing-mode，direction和text-orientation。

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

您的示例有点复杂，因为您有边距折叠和应用的默认边距 p因此很难理解。

这是一个更好的：

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

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

¹ : 您使用的链接是 MDN 页面，这是一个很好的参考，但不是官方规范。