身体不需要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;

Answer 2

从margin: 3rem auto;删除.content。

DEMO HERE

Answer 3

它来自div .content。要更正此问题，您应该将overflow:hidden添加到.main

示例

.main {
    margin-left: 20%;
    overflow: hidden;
}

或者，您可以将.content设置为inline-block。这也将纠正这个问题。

示例

.content {
    display: inline-block;
}