Question

对不起，我是一个总菜鸟，但我想创建一个网站，我听说我应该使用margin 0 auto来布局中心。我到处都搜索过这个，但我不认为这和这里的问题一样。

CSS：

#page-wrap
{
    height: 1008px;
    width: 900px;
    background: #000000;
    margin: 0 auto;
}

HTML：

<body>
    <div id="page-wrap"></div>
    <header></header>
</body>

我在窗口顶部和#page-wrap div之间得到了一个无法解释的9px边距。

http://gyazo.com/90fe8fe2e151ac9ae5b0bc93d3b5ba79.png

请解释我做错了什么，不要笑我超新手。感谢

Answer 1

margin: 0 auto;将0个边距应用于元素的顶部，将auto边距应用于元素的右侧。

使用CSS边距时，值从顶部顺时针应用于元素：

margin: 10px 11px 12px 13px;

以下列方式应用边距

margin-top: 10px;
margin-right: 11px;
margin-bottom: 12px;
margin-left: 13px;

9px边距是由浏览器默认填充引起的。您可以覆盖浏览器默认样式，如下所示：

body, html
{
    min-height: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
{

#page-wrap
{
    height: 1008px;
    width: 930px;
    background: #000000;
    margin: 0 auto 0 auto;
}

Answer 2

通过使用全局选择器*

添加到您的css来尝试此操作

{ margin:0px; padding:0px;}

不知道元素之间的9px边距的原因

2 个答案: