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 の間には 100 ピクセルではなく 50 ピクセルの余白しかありません。

マージンの折りたたみに関する多くの記事を読みましたが、そのすべてがパディングまたはボーダーを親に設定するように言っています。div を本体に直接配置し、本体にパディングを設定しようとしました。div にパディングを設定しようとしました。div をコンテナー div に配置して、パディングまたはボーダーを設定しようとしましたが、何も機能していないようです。

私の例でわかるように、私が見つけた唯一の解決策は汚いですが、高さ1pxのdivの間に要素を配置することです。そして、最終的にdiv間に100pxがあり、1pxのために101もあります

.

私はより良い解決策を望み、私が試したことがない理由も理解しています.

私の悪い英語を許してください（私のせいではありません、私はフランス人です）そして事前に感謝します:)

4

1 に答える 1

0

最初の div には ID とクラスがあるため、これを行うことができます。

.mainマージンを次のように変更します。margin:0 auto 100px auto;

#homeのスタイルで ID を追加します。margin-top:100px;

フィドルを数回いじりましたが、50px の上下の余白が機能しない理由がわかりませんが、上記で提供したことで問題が解決します。これがうまくいく場合は、回答済みとして受け入れてください。

于 2012-11-19T14:46:35.890 に答える