当我将 h1 或 div 与 margin-top 或 margin-bottom 一起使用时，空白出现顶部/底部答案

【问题标题】：white space appears top/bottom when I use h1 or div with margin-top or margin-bottom当我将 h1 或 div 与 margin-top 或 margin-bottom 一起使用时，空白出现顶部/底部
【发布时间】：2015-01-07 19:05:55
【问题描述】：

您能告诉我为什么当我将另一个 div/id/class/heading 放在顶部或底部边距的 div 中时会出现空格吗？

Here is the situation

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

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

示例链接：here

【讨论】：

【解决方案2】：

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

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

然后从 .content-with-margin 中删除“margin-top:30px”

【讨论】：

【解决方案3】：

尝试为您的父 div 添加透明边框：

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

【讨论】：

【解决方案4】：

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

jsFiddle Example

【讨论】：

【解决方案5】：

例如，因为 h1 具有默认边距，它“跨越”包含块。因此，您应该将 h1 处的边距清零。我认为当您使用空 div 时不会发生这种情况。

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

【讨论】：

【解决方案6】：

0.1px 的内边距可以在不增加可见空间的情况下解决问题。

将此添加到您的 div：

.mid {
    padding-top: 0.1px;
}

【讨论】：