子要素のマージンは親要素を移動します

私が持っているdiv（親別含まれている）div（子）。親は、body特定のCSSスタイルがない最初の要素です。設定すると

.child
{
    margin-top: 10px;
}

最終結果は私の子供の上部がまだ親と揃っているということです。子が10ピクセル下にシフトされる代わりに、私の親は10ピクセル下に移動します。

私DOCTYPEはに設定されていXHTML Transitionalます。

ここで何が欠けていますか？

edit 1
私の親には背景が上から下に（ピクセル完全）表示される必要があるため、厳密に定義された寸法が必要です。したがって、垂直マージンを設定することはできません。

編集2
この動作は、FF、IE、およびCRで同じです。

DIV内のマージンを持つ子要素で代替を見つけました次を追加することもできます：

.parent { overflow: auto; }

または：

.parent { overflow: hidden; }

これにより、マージンが崩れるのを防ぎます。ボーダーとパディングは同じです。したがって、次のものを使用して上部マージンの折りたたみを防ぐこともできます。

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

人気のリクエストによる更新： マージンを縮小することの要点は、テキストコンテンツを処理することです。例えば：

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

ブラウザーはマージンを縮小するため、テキストは期待どおりに表示され、<div>ラッパータグはマージンに影響を与えません。各要素により、周囲にスペースが確保されますが、スペースが2倍になることはありません。マージン<h2>とは<p>加算されませんが、お互いにスライド（彼らが崩壊します）。<p>and <ul>要素でも同じことが起こります。

悲しいことに、現代のデザインでは、このアイデアは、明示的にコンテナーが必要なときに気に入るでしょう。これは、CSSで言う新しいブロックフォーマットコンテキストと呼ばれます。overflowまたはマージントリックはあなたにそれを与えるだろう。

これは通常の動作です（少なくともブラウザの実装では）。親にパディングがある場合を除いて、マージンは親に対する子の位置に影響を与えません。その場合、ほとんどのブラウザーは、子のマージンを親のパディングに追加します。

希望する動作を得るには、次のものが必要です。

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

すべての答えは問題を解決しますが、次のようなトレードオフ/調整/妥協が付属しています

• floats、要素をフロートする必要があります
• border-top、これは親を少なくとも1px押し下げます。これは-1px、親要素自体にマージンを導入して調整する必要があります。これは、親がすでにmargin-top相対単位を持っている場合に問題を引き起こす可能性があります。
• padding-top、使用と同じ効果 border-top
• overflow: hidden、ドロップダウンメニューのように、親がオーバーフローするコンテンツを表示する必要がある場合は使用できません
• overflow: auto、（意図的に）オーバーフローするコンテンツ（シャドウやツールチップの三角形など）を持つ親要素のスクロールバーを導入します

この問題は、CSS3疑似要素を次のように使用することで解決できます。

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

display:inline-block子要素にスタイルを追加する

親要素は、少なくとも 子要素の前に置く必要があります。

これは私のために働いたものです

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

.css内で、div要素のdisplayプロパティをinline-blockに設定すると、問題が解決することがわかりました。マージンは期待どおりに機能します。

きちんとしたCSSのみのソリューション

次のコードを使用して、コンテンツのない最初の子を意図せず移動するdivの前に追加します。

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

この方法の利点は、既存の要素のCSSを変更する必要がないため、設計への影響が最小限であることです。次に、追加される要素は疑似要素です。は、DOMツリーにないです。

疑似要素のサポートは広く普及しています：Firefox 3以降、Safari 3以降、Chrome 3以降、Opera 10以降、IE 8以降。これは、最新のブラウザで機能します（新しいブラウザには注意してください）::before IE8ではサポートされていないに）。

環境

要素の最初の子に margin-top場合、親は冗長なマージンを折りたたむ方法としてその位置を調整します。どうして？そんな感じです。

次の問題があるとします。

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

単純なスペースなどのコンテンツを持つ子を追加することで修正できます。しかし、私たちは皆、デザインのみの問題であるスペースを追加することを嫌います。したがって、white-spaceプロパティを使用してコンテンツを偽造します。

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

position: relative;修正の正しい配置を保証する場所。またwhite-space: pre;、空白などのコンテンツを修正に追加する必要がなくなります。そしてheight: 0px;width: 0px;overflow: hidden;、あなたが修正を見ることは決してないでしょう。

追加するline-height: 0px;かmax-height: 0px;、高さが実際に古いIEブラウザーでゼロになるようにする必要があるかもしれません（私にはわかりません）。<!--dummy-->それが機能しない場合は、オプションで古いIEブラウザーに追加できます。

つまり、CSSだけでこれらすべてを実行できます（HTML DOMツリーに実際の子を追加する必要がなくなります）。

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

「Div親」を防ぐには、「div子」のマージンを
使用します。親では、次のcssを使用します。

• 浮く
• パディング
• 境界
• オーバーフロー

にmargin含まれて.childいる要素のが折りたたまれています。

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

この例でpは、はmarginブラウザからデフォルトのスタイルを受け取ります。ブラウザのデフォルトfont-sizeは通常16pxです。持つことによりmargin-top上以上に16pxのを#childおそれの位置の動きに気づき始めます。

私もこの問題を抱えていましたが、負のマージンハックを防ぐ方が好ましいため、

<div class="supercontainer"></div>

余白の代わりにパディングがあるすべての周り。もちろん、これはより多くの分裂を意味しますが、これはおそらくこれを適切に行う最もクリーンな方法です。

興味深いことに、この問題に対する私のお気に入りの解決策はまだここでは言及されていません。フロートの使用です。

html：

<div class="parent">
    <div class="child"></div>
</div>

css：

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

ここでそれを見てください： http //codepen.io/anon/pen/Iphol

あなたが親での動的高さを必要とする場合には、それも浮くしていることに注意してください、そう簡単に置き換えるheight:100px;ことにより、float:left;

正解を知る前に見つけた別の解決策は、透明な境界線を追加することでした、親要素にを。

ただし、ボックスは追加のピクセルを使用します...

.parent {
    border:1px solid transparent;
}

top代わりにを使用することはmargin-top、必要に応じて別の可能な解決策です。