奇怪的顶部间隙和不居中的 CSS答案

【问题标题】：Weird Top Gap & Not Centred CSS奇怪的顶部间隙和不居中的 CSS
【发布时间】：2012-01-25 14:34:31
【问题描述】：

我有一个简单的 HTML 页面，它由 4 个高度相等的 div 组成，它们彼此叠放并且都位于页面中间。

我的问题： div 没有在页面中间居中，并且由于某种原因在页面顶部有一个填充。

我的代码有什么问题？如何删除顶部的白色间隙并使 div 水平居中？并不是说在 IE 中，div 居中且不出现间隙，但在 Safari、Firefox 和 Chrome 中会出现问题。

JSFiddle：http://jsfiddle.net/S9Khv/embedded/result/

我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    <!--
html {
    margin: 0 auto;
    padding: 0 auto;
}

body {
    background-color: white;
    margin: 0 auto;
    padding: 0px 150px 0px 150px;
    text-align: center;
}

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


/*Main Elements*/
.homeContainer {
    width: 800px;
}

#header {
    height: 400px;
    background-color: #000000; /*temporary*/
}

#mainDiv {
    height: 600px;
}

#clientDiv {
    height: 500px;
}

#footer {
    height: 600px;
    background-color: RGB(115,115,115); /*temporary*/
}
    -->
    </style>
</head>
<body>

    <div id="header" class="homeContainer">
        <p>kjkj</p>
    </div>

    <div id="mainDiv" class="homeContainer">
        <p>kjkj</p>
    </div>

    <div id="clientDiv" class="homeContainer">
        <p>kjkj</p>
    </div>

    <div id="footer" class="homeContainer">
        <p>kjkj</p>
    </div>

</body>
</html>

【问题讨论】：

给 div 一个边距：0 auto;
@j08691 谢谢你把它放在中心，你应该回答我才能接受。关于顶部白色间隙的任何想法？
顶部间隙可能是由于浏览器的默认样式。您应该重置 CSS。
jake 嵌入到您的网站时是否存在间隙，或者您只是指 jsfiddle 结果？如果您指的是小提琴，我认为这只是 jsfiddle 覆盖。
@Jake M - 看起来额外的间距来自 jsFiddle。如果您查看我的答案中的链接，当您在 iframe 之外查看小提琴时，您会发现差距已经消失。

标签： html css firefox webkit

【解决方案1】：

这是一个分叉的小提琴，只是将 div 标签边缘的样式更改为 margin:0 auto;

似乎解决了问题。

jsFiddle

【讨论】：