margin-top和-webkit-margin-before有什么区别？

Question

Webkit已经添加了自己特定的边距，它们是：

-webkit-margin-before:
-webkit-margin-after:
-webkit-margin-start:
-webkit-margin-end:

我理解(margin-left和-webkit-margin-start)或(margin-right和-webkit-margin-end)之间的区别，它与“从左到右”或“从右到左”的语言有关。

我的问题是(margin-top和-webkit-margin-before)或(margin-bottom和-webkit-margin-after)之间有什么区别？

注意：很明显，-webkit前缀只在基于Webkit引擎的浏览器上起作用，例如Chrome和Safari。这个问题与此无关。

- Arashsoft

---

我一直找不到-webkit-margin-before和-webkit-margin-after的官方文档。我只能假设这些属性与“自上而下”和“自下而上”的语言有关。我不确定是否存在“自下而上”的语言，但是这个网站列出了一些例子：http://www.omniglot.com/writing/direction.htm。 - MarkPlewis

@MarkPlewis，这很有趣！也许-webkit-margin-before在“从下到上”的语言中作为margin-bottom。 - Arashsoft

Answer 1

到目前为止我能找到的最好答案是，-web-margin-before在普通文档中与margin-top相同，但在“从下到上”方向的语言中将充当margin-bottom（同样的想法适用于-webkit-margin-after）。

您可以在此链接omniglot.com/writing/direction.htm 中找到许多“从下到上”方向的语言（感谢@MarkPlewis）。

- Arashsoft

---

一个有用的知识是它们是“通用”边距的一种形式。例如，在 flexbox 中，它会根据 flex-direction 正确设置元素的边距，而 margin-<direction> 则不起作用。 - Kilves

Answer 2

尽管Chrome和WebKit支持从-webkit-中提取的所有属性和关键词，但Safari仅支持start（Mozilla做得更好，因为它同时支持start和end）。虽然所有这些属性据说在Safari 6中都能够工作，但当它推出时，我们需要使用前缀属性来替换top、right和bottom值，以使我们的样式“方向”无关。

基本上，-webkit-可以用于针对不同的浏览器，例如Safari、Chrome和Firefox。详细文章可以在这里找到。

本文讨论了为基于WebKit的浏览器创建基础样式表的方法。

为了防止不应用-webkit-值，我使用:

*, *:before, *:after {
    box-sizing: inherit;
}

- prashmi