【问题标题】: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/

http://i.stack.imgur.com/uWJeC.png

【问题讨论】:

标签: css html whitespace removing-whitespace


【解决方案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;
}

Live demo

【讨论】:

  • 谢谢,虽然这确实在视觉上解决了问题,但我不确定它是否解决了根本问题。它现在可以,但我希望我也能理解为什么会发生这种情况,因为虽然它在页面上不可见,但 .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 标记?不记得了......)

【讨论】:

    猜你喜欢
    • 2011-09-04
    • 2020-03-19
    • 2015-04-09
    • 2014-09-15
    • 1970-01-01
    • 2021-12-20
    • 2014-02-04
    • 1970-01-01
    • 2013-11-20
    相关资源
    最近更新 更多