当我使用带有margin-top或margin-bottom的h1或div时，空白区域显示为top / bottom

Question

你能不能告诉我为什么当我放入div时出现空格，另一个div / id / class / heading有顶部或底部边缘？

Here is the situation

谢谢！

Answer 1

将padding: 1px 0;添加到mid div会阻止边距从框中折叠，从那里你可以调整元素的默认边距以适应并且仍然有空格

示例链接：here

Answer 2

尝试向父div添加透明边框：

.mid
{
    border-width: 1px 0;
    border-color: transparent;
}

Answer 3

将其添加到CSS文件的开头以重置边距和填充。

* {
    margin: 0px;
    padding: 0px;
}

然后从.content-with-margin

中删除“margin-top：30px”

Answer 4

一个解决方法是将一个几乎为空的div附加/前置到容器中，如<div style="padding-top: 1px; margin-top: -1px;"></div>

jsFiddle Example

Answer 5

因为例如h1具有默认边距，其“覆盖”包含块。所以你应该在h1处使边距为空。我不认为当你使用空div时会发生这种情况。

编辑：你当然可以像Hussein所说的那样处理这个案例，但我宁愿为你的内容创建div包装器。它应该工作afaik并且是更通用的方式，因为你不必更改你想要放在那里的每个不同元素的填充和边距。但侯赛因的解决方案完全有效。你有更多的选择来处理它。

Answer 6

0.1px填充将解决问题而不添加可见空间。

将此添加到您的div：

.mid {
    padding-top: 0.1px;
}