これは大変なことだと思います。
を利用したグリッドシステムを使用していfloat:leftます。で書き直すこともできますがdisplay:inline-block、それでは何も変わりません。
2 つの列があるとします。
<div class="row">
<div class="column">
<!-- some content here -->
</div>
<div class="column">
<!-- some content here -->
</div>
</div>
（ のように<h1>） margin-top を含むブロック要素を配置すると、コンテンツの前にマージンが折りたたまれなくなります。浮動要素 (または表示: インライン ブロック) では常にそうであるため、これは正常です。
しかし、私はマージンを崩壊させたいと思っています。私はそれを機能させるために多くのことを試みましたが、2 つの要素を隣り合わせに配置するすべての CSS は、上記のコンテンツへの折りたたみマージンを破壊するようです。
CSS を使用して要素の最初の子を取得し、margin-top を取り除くことができます。ただし、この場合は適用されません。コンテンツは CMS で構築されており、要素に到達するまで任意のレベルの要素の深さが存在する可能性があるためです。
JavaScriptなしでこれを行う方法はありますか?
フィドル: http://jsfiddle.net/HerrSerker/ZSV3D/
h1margin-topと margin-bottom が.header折りたたまれていないことがわかります。これは によるものfloat:leftです.column。
.header {
font-size: 24px;
background: rgba(0,255,0,0.1);
}
h1 {
background: silver;
margin-bottom: 50px;
font-size: 28px;
}
.column {
float: left;
width: 50%;
background: rgba(255,0,0,0.1);
}
h2 {
background: gold;
margin-top: 50px;
font-size: 24px;
}<div class="header"><h1><h1>Headerh1</h1></h1></div>
<div class="row">
<div class="column"><h2><h2>Col 1, float: left</h2></h2></div>
<div class="column"><h2><h2>Col 2, float: left</h2></h2></div>
</div>
<p>I want a 50 pixel margin between Header and the Cols, but the two margins don't collapse and I end up with 50 + = 100 pixel gap. If it would work, you wouldn't see the light red above col1 and col2</p>編集
もちろん、CSS のような後継演算子を使用することもできheader + .row .column h1 { margin-top: 0;}ます。しかし、それは私が望むものではありません。私が欲しいのは、含まれている要素のマージン崩壊で機能する要素を隣り合わせに設定する方法です。
編集2
では、状況と質問をもう一度簡単に。
問題はかなり単純です。float:left; のように 2 つ以上の div を並べて設定できる CSS コードがあります。幅:50%。これらの div の内部には、上部マージンを持つ h2 のような要素があります。底マージンのある h1 がある前に div 内にある場合。この状況では、h1 と h2 のマージンが崩れることはありません。margin-collapse を使用して、マージンを手動でゼロに設定せずに要素を隣り合わせにする可能性はありますか?
もしくはそうでないか。新しいブロック書式設定コンテキストを作成せずに要素を隣り合わせに設定する可能性はありますか?
編集3:
-------------------------------------------------------------
What it is:
┌─ .header ─────────────────┐
│ ┌─ h1 ──────────────────┐ │
│ │ │ │
│ └───────────────────────┘ │ ┄┄┄┬┄┄┄
└───────────────────────────┘ ┆
┆ margin-bottom of h1
┆
┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┼┄┄┄
┆
┆ margin-top of h2
┌─ .row ────────────────────┐ ┆ not collapsing
│ ┌─ .col ───┐ ┌─ .col ───┐ │ ┄┄┄┴┄┄┄
│ │ ┌─ h2 ─┐ │ │ ┌─ h2 ─┐ │ │
│ │ └──────┘ │ │ └──────┘ │ │
│ └──────────┘ └──────────┘ │
└───────────────────────────┘
-------------------------------------------------------------
What I want:
┌─ .header ─────────────────┐
│ ┌─ h1 ──────────────────┐ │
│ │ │ │
│ └───────────────────────┘ │ ┄┄┄┬┄┄┄
└───────────────────────────┘ ┆ margin-bottom of h1
┆ and margin-top of h2
┌─ .row ────────────────────┐ ┆ collapsing
│ ┌─ .col ───┐ ┌─ .col ───┐ │ ┆
│ │ ┌─ h2 ─┐ │ │ ┌─ h2 ─┐ │ │ ┄┄┄┴┄┄┄
│ │ └──────┘ │ │ └──────┘ │ │
│ └──────────┘ └──────────┘ │
└───────────────────────────┘
-------------------------------------------------------------