div/部分之间的持久空间答案

【问题标题】：persistent space between divs/sectionsdiv/部分之间的持久空间
【发布时间】：2014-11-26 21:38:08
【问题描述】：

我意识到这个问题已经被问过好几次了，但坦率地说，在任何情况下我都没有找到真正的答案。无论我尝试什么，我都无法摆脱 div 之间的空格？这是问题的简化版本和 jsfiddle：http://jsfiddle.net/hhLopqwm/1/。有任何想法吗？如何使 div 连接？

<div class="top">
so what <br><br> is going on here
</div>

<div id="work">
<h2>no margins control this space between divs</h2>
<h4>it's like magic or something</h4>
</div>

<div class="red">
any clue what should I do?
</div>

【问题讨论】：

这不是“魔术”，而是从浏览器样式表中获得的h2 中的margin-top 和h4 中的margin-bottom。您的（重新搜索）关键字分别是折叠边距。 相邻边距。 -1 因为 a) 这已经讨论了很多，并且 b) 使用浏览器的开发工具很容易让您了解自己。
尝试 CSS 重置。它废弃所有浏览器 CSS 默认值并设置基线，通常使用最少的样式。您必须重新添加样式，但这会消除很多惊喜。

标签： html css

【解决方案1】：

标题元素（在您的示例中为 <h2> 和 <h4>）也有将父 div 分开的边距：

div, h2, h4 {
    margin:0;
    padding:0;
}

    html {
        margin: 0;
        padding: 0;
    }
    .top {
        background-color:yellow;
        text-align: center;
        margin: 0;
        padding:0;
    }
    #work {
        background-color:green;
        margin:0;
        padding:0;
        text-align: center;
    }
    div, h2, h4 {
        margin:0;
        padding:0;
    }
    .red {
        text-align: center;
        background-color:red;
    }

    <div class="top">so what the hell
        <br>
        <br>is going on here</div>
    <div id="work">
        	<h2>no margins control this space between divs</h2>

        	<h4>it's like magic or something</h4>

    </div>
    <div class="red">any clue what should I do?</div>

【讨论】：

就是这样。数字我错过了这么简单的东西。感谢您的帮助！

【解决方案2】：

检查此链接： How to remove the gap between div in html?

使用

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

在 CSS 的顶部

【讨论】：

【解决方案3】：

H2, H4 {margin: 0;} 将修复它，如前所述，它的边距。您还可以使用 padding 将 div 推出适当的量，或使用 min-height 来解决问题。

就个人而言，我可能会从所有 H1/2/3/4/5/6 中删除边距。我什至不会使用重置，因为通常这会添加比其价值更多的 CSS。

我的标准重置是html, body, H1, h2, h3, h4, h5 {margin:0; padding:0;}

请不要使用：* {margin: 0;填充 0;} 这通常是不好的做法，并且可以并且会破坏某些表格等，如果您想了解更多信息，请在 Google 上搜索。

以下是一些缺点： http://www.cssreset.com/scripts/universal-selector-css-reset/

•无法控制确切重置哪些元素——文档中使用的每个元素现在必须明确设置其边距和填充，以及可能包含在重置中的任何其他属性，例如边框和轮廓（请参阅扩展版本下面）。

•告别从父元素到子元素的 CSS 规则继承——通用选择器每次都胜出（参见下面关于继承的注释）。因此不仅每个元素都必须在重置后定义，而且子元素现在不能继承每个元素的属性，因此它们也必须显式定义。这需要的代码量甚至可能抵消最小 CSS 重置所节省的大小！

•根据通用声明，浏览器必须遍历页面上的每个元素并应用通用规则：元素、它们的子级和曾-曾-曾-孙-孙子都一样，有些人声称这可能是一个巨大的命中资源和页面加载时间（这一点对于现代浏览器来说是有争议的。）

•另外——这可能是许多人的麻烦——Internet Explorer 6 和 7 不支持通用选择器。

【讨论】：