具有多种类型的 CSS 边距

Question

抱歉这个愚蠢的问题但是我在一段看起来像的代码中找到了

margin-left: 150px;
margin-left: 8%;
margin-left: 7vw;

你能解释一下这是谁工作的吗？将使用哪个？我们也不能写这样的东西:

margin-left: 150px, 8%, 7vm;

我认为这是一个简短的版本还是什么？编辑 我只问了 margin-left 而不是 margin 的所有属性 :)

Answer 1

如果这样写:

 margin-left: 150px;
 margin-left: 8%;
 margin-left: 7vw;

只有 margin-left: 7vw; 会被接受，因为它会覆盖 margin-left: 150px; 和 margin-left: 8%; , margin-left, margin-right , margin-top , margin-bottom 只接受单个值(value)。

你可以像这样使用 margin 的简写形式:

margin: margin-top margin-right margin-bottom margin-left

例子:

边距:10px 15px 20px 5px;

所以在这个简写中，最后一个 5px 将设置为 margin left ，

还有两种速记方式:

2 个值:

边距:(margin-top + margin-bottom)(margin-left + margin-right)

例子:

边距:10px 20px

3 个值:边距:(margin-top)(margin-left + margin-right)(margin-bottom)

例子:

边距:10px 自动 20px