css - 谁能想到这两种编写相同代码的方式会导致问题的原因？ (很快)

Question

我正在制作一个名为“fullWidthContainer”的容器，用于放置我所有的文章和废话。它需要与顶部页眉和底部页脚隔开，所以我在顶部和底部给了它 40px 的边距。

HTML代码:

<div id="fullWidthContainer class="cAlign">
...
</div>

CSS:

div#fullWidthContainer
{
margin: 40px 0 40px 0;
}


.cAlign { width: 960px; margin: 0 auto; }

这导致里面的所有内容都没有居中对齐。一切都被顶起并向左对齐。

如果我以这种方式输入上面的 CSS 代码......:

div#fullWidthContainer
{
    margin-top: 40px;
    margin-bottom: 40px;
}

.cAlign { width: 960px; margin: 0, auto; }

然后它工作正常。为什么是这样？这不是同一个意思吗？我觉得这是我错过的非常容易的事情....

Answer 1

我认为这是因为您的 margin-left 和 margin-right 一开始就不是 0。在第一段代码中，您将它们设置为 0px。在第二个中，您不要触摸它们。