删除 div 之间的空白空间答案

【问题标题】：Removing empty space between divs删除 div 之间的空白空间
【发布时间】：2012-09-25 10:34:32
【问题描述】：

这似乎是一个常见问题，我尝试了多种解决方案，但似乎没有一个适合我。每个 div 之间应该有 10px 的空间，但在最上面的 div 上应该有 20px 的空间。

我更改了行高、填充、边距、定位和块。确实有一个空的

标签（这是另一个问题！），但即使删除了该标签/边距重置，问题也不会消失。有什么想法吗？

在这张图片中，您可以看到我使用 CSS 编辑器选择了 div。顶部没有可见的填充（用虚线表示，没有边距。但是，内部灰色 div 和外部白色 div 之间有空间。 http://www.ims4u.net/settlements/

【问题讨论】：

【解决方案1】：

您的容器和您的内容一样有 10 像素的内边距。删除一个或另一个，你会很高兴的。

【讨论】：

谢谢。我实际上确实希望它有 10px 的填充。显示的内容更像是 20px。因此，虽然我可以删除它并在视觉上解决问题，但仍有大约 10 像素的空间。
这是因为您有两次填充导致问题。除了边框之外，.content div 的大小几乎与#container 相同。如果您想要填充，请在顶部设置 .content 边距 -10px。但我可能不完全理解为什么需要 20px 的内边距才能显示为 10px。

【解决方案2】：

........演示 http://jsfiddle.net/46wGt/2/ ................... ....

把这个css写在你的css文件中

#content.hfeed.content{
padding-top:0;
}

【讨论】：

谢谢，虽然这确实在视觉上解决了问题，但我不确定它是否解决了根本问题。它现在可以，但我希望我也能理解为什么会发生这种情况，因为虽然它在页面上不可见，但 .page div 和 .entry-content div 之间仍有空间。不过谢谢！

【解决方案3】：

这个问题说明了将 CSS 重置作为样式的一部分的原因。大多数浏览器都有默认样式，可以改变用户体验的外观和感觉。

您可以包含一个完整的重置，该重置考虑了许多功能/错误，例如http://necolas.github.com/normalize.css/2.0.1/normalize.css 或者你可以包含一些更轻量级的东西，比如http://meyerweb.com/eric/tools/css/reset/。

这将帮助您解决诸如“为什么 Firefox 看起来像...，而 IE 看起来像...？”这样的问题。

如果您使用其中之一，它将删除许多浏览器添加到 html 标记的默认 10 像素边距（或者它是 body 标记？不记得了......）

【讨论】：