html - body 上不需要的 48px 边距？

Question

我正在构建一个用于创建 wordpress 主题的静态 html 页面。但现在我注意到 48px 边距在 body 元素上方(我用 chrome 开发人员工具找到了它)。我可以通过添加 -48px 边距来修复它但是究竟是什么导致了这个问题，谁能帮帮我。

我的CSS

body{
    font-size:18px;
    line-height:1.72222;
    color:#34495e;
    font-family:Ubuntu;
    margin:0
}
aside {
    background: #31373d;
    height: 100%;
    position: fixed;
    width: 20%;
    font-weight: normal;
    color:#fff;
}
.main {
    margin-left: 20%;
}
.content{
    width: 65%;
    max-width: 760px;
    margin: 3rem auto;
}

看看这个实时 JSfiddle 演示 - http://jsfiddle.net/aq96b/1/embedded/result/

Answer 1

就是这条线

margin: 3rem auto;

在导致此问题的 .content 中(如果我正确理解问题)。取消选中/删除该边距会将内容移回 .main div 的左上角。

为了与内容位置保持相似的效果，您可以向 .main 添加相同数量的填充，即

padding: 3em;