Question

我正在使用margin: 0 auto;来居中我的网页内容。最近我发现在body上使用自动边距与（包装）div上的自动边距具有相同的视觉效果。

<!DOCTYPE>
<html>
<head>
    <style>
        div#wrapper {
            margin: 0 auto;
            width: 60%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <!-- Rest of page. -->
    </div>
</body>
</html>

与;相比;

<!DOCTYPE>
<html>
<head>
    <style>
        body {
            margin: 0 auto;
            width: 60%;
        }
    </style>
</head>
<body>
    <!-- Rest of page. -->
</body>
</html>

它似乎更好，因为它删除了（不必要的）元素。使用这种方法时是否有任何需要考虑的陷阱？

Answer 1

我一直使用身体上的自动保证金。您只需记住，如果要为页面设置背景，则必须将其设置为html标记，因为人们通常会在页面背景上设置。

Answer 2

我不推荐它。在你不必要的身体框上设置边距，你最终会使用负边距和绝对定位来突破。

坚持使用您的容器（或包装）模型 - 它被广泛认为是最佳做法。检查此来源以及任何其他专业设计的网站，您会看到相同的内容。

使用自动边距来居中于body或div元素

2 个答案: