Question

所以，问题是关于保证金的崩溃。

代码：

<!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 px的边距而不是100px

我阅读了很多关于折叠保证金的文章，所有人都说要为父母设置填充或边框。我试图将div直接放在body中并将padding设置为body，我试图在div上设置padding，我试图将div放在容器div中并设置他填充或边框，似乎没什么用。

我找到的只有解决方案，但它很脏，正如你在我的例子中看到的那样，在div高度为1px的位置放置一个元素。然后，由于1px

，最终有100px的div，甚至101。

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

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

Answer 1

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

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

并添加样式为#home

的margin-top:100px; ID

我摆弄了小提琴，并且不明白为什么50px的上下边距不起作用，但我上面提供的内容将解决你的问题。如果这适合您，请接受它作为答案。

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

1 个答案: