margin-left 的属性值无效：auto

Question

很抱歉问了一个可能已经被问了无数次的问题，但我找不到答案。我不知道为什么浏览器给我一个Invalid property value 为margin-left: 0 auto 但不知何故在左边添加了一点边距（这是一个渲染错误吗？）。 它实际上可以在没有-left 的情况下工作，但我不知道为什么。

完整的示例代码： http://jsfiddle.net/zw7n0h2j/5/

#wrapper {
  width:800px;
}

.figure {
    display: block;
    /* margin: 0; */
    margin-left: 0 auto;
    width: 50%; 
}

.figure img {
    width: 100%;
}

.figure figcaption { 
    width: 100%;
}

<div id="wrapper">
    <figure class="figure" >
        <img src="https://via.placeholder.com/350x150" />
        <figcaption>My caption</figcaption>
    </figure> 
</div>

Answer 1

您可以使用 margin-left: 10px 在元素的左侧添加边距。

您还可以使用按顺时针顺序从顶部开始一直到左侧的速记边距属性。 [边距：右上左下]

如果要在元素左侧应用 10px 边距，可以使用margin: 0 0 0 10px

或者，如果你想使用简写的边距属性在元素的左右两边都应用 10px 的边距，你可以使用margin: 0 10px

有关更多信息，您可以参考 MDN 的 CSS 边距属性上的 this article。

Answer 2

margin-left 不能有多个参数。不像margin。所以margin-left: 0 auto 是无效的，因为0 和auto 是两个单独的参数，而margin: 0 auto 是有效的，因为这是

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

这些是按顺时针顺序应用的，所以如果你这样做margin: 12px, 13px, 14px, 15px;，边距将分别应用于顶部、右侧、底部和左侧的项目。

阅读更多相关信息here。