472

別の（子）を含むdiv（親）があります。親は、特定のCSSスタイルがない最初の要素です。設定するとdivbody

.child
{
    margin-top: 10px;
}

最終的な結果は、私の子の上部がまだ親と整列しているということです。子が10px下に移動する代わりに、私の親は10px下に移動します。

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

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

編集1
私の親は、その下に上から下に表示する必要がある背景があるため、厳密に定義された寸法を持っている必要があります（ピクセルパーフェクト）。したがって、垂直方向のマージンを設定することはできません。

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

4

15 に答える 15

562

DIV内にマージンがある子要素で代替を見つけました。追加することもできます。

.parent { overflow: auto; }

また：

.parent { overflow: hidden; }

これにより、マージンが崩壊するのを防ぎます。ボーダーとパディングは同じことをします。したがって、以下を使用して、トップマージンの崩壊を防ぐこともできます。

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

2021年の更新：IE11のサポートを終了する場合は、新しいCSS構造を使用することもできますdisplay: flow-root。ブロックフォーマットコンテキストの詳細については、MDNWebDocsを参照してください。

人気のあるリクエストによる更新： マージンを折りたたむポイントは、テキストコンテンツを処理することです。例えば：

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }
<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>要素についても同じことが起こります。

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

于 2009-12-21T13:00:03.920 に答える
59

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

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

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}
于 2009-11-19T11:10:31.413 に答える
28

すべての回答で問題は解決しますが、次のようなトレードオフ/調整/妥協が伴います。

  • 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/

于 2015-06-15T14:22:06.967 に答える
19

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

于 2015-04-08T09:36:53.160 に答える
10

親要素は、少なくとも&nbsp;子要素の前に置いて空にする必要はありません。

于 2013-07-23T09:00:13.990 に答える
9

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

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

于 2014-09-26T18:34:32.373 に答える
5

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

  • 浮く
  • パディング
  • 国境
  • オーバーフロー
于 2018-03-11T06:00:47.693 に答える
3

きちんとした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以降、IE8以降。これは最新のブラウザで機能します（::beforeIE8でサポートされていない新しいブラウザに注意してください）。

コンテクスト

要素の最初の子にが含まれている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;、あなたが修正を見ることは決してないことを確認してください。

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

つまり、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>
于 2017-11-13T09:30:00.430 に答える
2

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

于 2016-05-13T22:29:47.367 に答える
2

親のディスプレイで遊ぶ

.parent{
     display: inline-block;
     width: 100%;
}

また

.parent{ display: flex; }
于 2021-10-27T06:50:35.363 に答える
1

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-top16pxを超えるものを使用すると、#child位置が移動することに気付き始めます。

于 2009-11-19T11:45:40.417 に答える
1

私もこの問題を抱えていましたが、マイナスマージンのハッキングを防ぐことを好んだので、

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

その周りには、余白の代わりにパディングがあります。もちろん、これはより多くのdivitisを意味しますが、これを適切に行うための最もクリーンな方法である可能性があります。

于 2013-04-07T15:03:51.260 に答える
1

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

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;

于 2014-07-14T20:13:54.497 に答える
1

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

ただし、ボックスは余分なピクセルを使用します...

.parent {
    border:1px solid transparent;
}
于 2015-01-08T09:09:07.530 に答える
0

top必要に応じて、代わりにを使用するmargin-topことも考えられる解決策です。

于 2014-11-20T10:57:32.520 に答える