web-dev-qa-db-ja.com

子要素の余白は親要素を移動する

別のdiv（child）を含むdiv（parent）があります。 parentはbodyの最初の要素で、特にCSSスタイルはありません。設定したとき

.child
{
    margin-top: 10px;
}

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

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

私はここで何が足りないのですか？

編集1
私の親は、上から下にピクセル単位で表示する必要がある背景があるため、厳密に定義された寸法を持つ必要があります。そのため、垂直マージンを設定すると、no goになります。

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

cssxhtmlmarginnested
360
Robert Koritnik

DIV内にマージンを持つ子要素 で別の方法を見つけることもできます。

.parent { overflow: auto; }

または

.parent { overflow: hidden; }

これにより、マージンが 崩壊 になるのを防ぎます。ボーダーとパディングは同じことをします。そのため、次のようにして、上マージンの崩壊を防ぐこともできます。

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

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

<style type="text/css">
    h1, h2, p, ul {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<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>および<ul>要素についても同じことが起こります。

残念なことに、現代のデザインでは、明示的にコンテナが欲しいときにこのアイデアが噛み付くことがあります。これは、CSSの新しい ブロックフォーマットコンテキスト と呼ばれます。 overflowやマージントリックはあなたにそれを与えるでしょう。

430
vdboor

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

あなたが望む振る舞いを得るために、あなたは必要です：

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}
46
Ben James

すべての答えは問題を解決しますが、それらはトレードオフ/調整/妥協を伴いますが

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

19
Ejaz

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

12
Атанас Димитров

親要素は空である必要はなく、少なくとも子要素の前に&nbsp;を置く必要があります。

7
George SEDRA

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

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

6
erdomester

Div要素の表示プロパティをinline-blockに設定すると、.css>の内側でそれがわかります。それは問題を解決します。そしてマージンは期待通りに機能します。

2
vincent thorpe

私もこの問題を抱えていましたが、ネガティブマージンハックを防ぐために好まれました。

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

マージンの代わりにパディングがあるすべての周り。もちろんこれはより多くのdivitisを意味します、しかしこれはおそらくこれをきちんとしてもらうためにする最もきれいな方法です。

1
Zyl

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

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

.parent {
    border:1px solid transparent;
}
1
SandRock

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

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

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

この方法の利点は、既存の要素のCSSを変更する必要がないため、デザインへの影響が最小限に抑えられることです。これに隣接して、追加される要素は擬似要素です。これはDOMツリーではnotです。

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

コンテキスト

要素の最初の子が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;またはmax-height: 0px;を追加する必要があるかもしれません（よくわかりません）。それがうまくいかなければ、オプションとして、古いIEブラウザでそれに<!--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>
1
Yeti

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

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;に置き換えるだけです。

1
schellmax

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

<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を持っていることによって、あなたはそれが位置の移動に気付き始めます。

1
25thhour

"Div parent"を防ぐには、 "div child"のマージンを使用します。
親でこれらのcssを使用してください：

  • Float
  • パディング
  • 境界
  • オーバーフロー
0
bingo

適切であれば、margin-topの代わりにtopを使用することも可能です。

0
lamplightdev