Question

我意识到这个问题已被多次询问，但坦率地说，我没有设法在任何情况下找到真正的答案。无论我尝试什么，我都无法摆脱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>

Answer 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>

Answer 2

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

使用

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

位于CSS的顶部

Answer 3

H2, H4 {margin: 0;}会修复它，正如前面提到的那样。您还可以使用填充将div推出适当的数量，或使用最小高度来解决问题。

我个人可能会删除所有H1 / 2/3/4/5/6的保证金。我甚至不会使用重置，因为通常这会增加CSS而不是它的价值。

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

请不要使用：* {margin：0;填充0;} 这通常是不好的做法，如果你想要更多的信息，可以并且会破坏某些形式等等，谷歌它。

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

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

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

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

•另外 - 这可能是许多人的交易破坏者 - Internet Explorer 6和7不支持通用选择器。

div / sections之间的持久空间

3 个答案: