0

所以，问题是关于崩溃的边距。

按照这个例子：http: //jsfiddle.net/2ausj/

代码 ：

<!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。在这种情况下，每个顶部和底部的边距为 50 像素，但在 div 之间，只有 50 像素的边距而不是 100 像素

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

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

.

我希望有一个更好的解决方案，并且也理解为什么我没有尝试过任何工作。

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

4

1 回答 1

0

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

.main将您的保证金更改为：margin:0 auto 100px auto;

并添加#home样式为的 IDmargin-top:100px;

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

于 2012-11-19T14:46:35.890 回答