Question

我最近设计了一个网站（http://willryan.us/typefun01），主要是在编码时使用Chrome进行测试。我最近注意到在某些部分的末尾发生了一些奇怪的事情，（历史之后的差距，样式与解剖学的重叠）。

我的样式表中有一个css重置（不确定是否与此有关），我无法弄清楚是什么导致这种情况，以及如何让网站看起来像是在查看时的样子铬

Answer 1

历史之后的差距是由于：

#historyWide {
    margin: 250px 80px 75px;
}

可以通过以下方式解决：

div#content > div {
    overflow: hidden; /* or auto */
}

您还可以将#content子div内的元素的大上下边距移动到子div上的填充。只要它们全部包含在那些儿童div中，任何东西都会起作用。

您只是看到浏览器处理不完美布局的不同方式。

Answer 2

如果你想避免历史之后的差距，你会想要在historyWide中使用填充而不是边距;边距拉开元素，而填充使它们更大

在解剖学上发生的事情是你使用属性“top”修改#styles，这将移动元素，但父级将仅保留元素的原始空间。如果必须保持元素之间的关系，那么使用边距和填充比使用“顶部”更好。

最后，我希望像#stylesMono一样使用边距定位元素。我认为你可以更好地使用段落来保持垂直位置，并从那里，在“p”的范围内使用浮点数，边距和填充。