折叠边距，均匀宽度填充或边框答案

【问题标题】：Collapsed margin, even width padding or border折叠边距，均匀宽度填充或边框
【发布时间】：2012-11-07 11:43:10
【问题描述】：

所以，问题在于折叠边距。

代码：

<!DOCTYPE html>
    <html lang="fr">

    <head>
<title>Page</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" media="screen, tv, projection" href="css/style.css" />
    </head>

<body>

<div id="main">

    <div id="home" class="main"></div>

    <div class="main"></div>
    <p></p>
    <div class="main"></div>

    <div class="main"></div>

    <div class="main"></div>

    <div class="main"></div>

    <div class="main"></div>
</div>
</body>

</html>

和CSS

html { overflow: hidden;}

body {
background: transparent url('../images/background.jpg') repeat;
}

#main { background: blue; padding: 1px; border: 1px;}

.main {
max-width: 1000px;
height: 200px;
background: red;
margin: 50px auto;
position: relative;
position: absolute;
}

p { height: 1px; }

我有一些 div。在这种情况下，每个顶部和底部都有 50px 的边距，但在 div 之间，只有 50 像素的边距而不是 100 像素

我阅读了很多关于折叠边距的文章，所有文章都说要为父级设置填充或边框。我试图将 div 直接放在 body 中并为 body 设置 padding，我试图在我的 div 上设置 padding，我试图将我的 div 放在一个容器 div 中并为他设置 padding 或边框，似乎没有任何效果。

我找到的唯一解决方案但它很脏，正如您在我的示例中看到的那样，在 div 之间放置一个高度为 1px 的元素。然后，div之间终于有了100px，甚至是101，因为1px

我希望有一个更好的解决方案，并且也理解为什么我尝试过的所有方法都不起作用。

请原谅我的英语不好（不是我的错，我是法国人）并提前感谢:)

【问题讨论】：

标签： html margin

【解决方案1】：

由于你的第一个 div 有一个 ID 和一个类，你可以这样做：

将您的.main 边距更改为：margin:0 auto 100px auto;

并添加#home ID，样式为margin-top:100px;

我用 Fiddle 摆弄了几次，不明白为什么 50px 的顶部和底部边距不起作用，但我上面提供的内容将解决您的问题。如果这对您有用，请接受它作为回答。

【讨论】：

不，对不起，你不明白：我希望所有 div 的顶部和底部都有 50px 的边距。不可能有一个底部边距的 div，然后是一个顶部边距没有元素的 div 吗？
应该可以，但我不明白为什么它不起作用。它很奇怪。您也可以将padding-top:100px; 添加到#main，而不是添加#home: margin-top:100px; 样式。这两个都会给你与添加 50 个顶部和 50 个底部到每个 div 相同的结果。
不，听着：我希望每个块都有顶部和底部空间，而不是 div 边距底部的较大值。我找到了另一个替代解决方案：使用填充而不是边距。这是工作，我可以在 div 上填充底部并在跟随器上填充顶部，并且我有正确的 2 间距值。但我的解决方案不起作用，我不得不在 div 上设置背景...