別のdiv
(child)を含むdiv
(parent)があります。 parentはbody
の最初の要素で、特にCSSスタイルはありません。設定したとき
.child
{
margin-top: 10px;
}
最終結果は私の子供の上がまだ親と一直線に並んでいるということです。子供が10ピクセル下にシフトされる代わりに、私の親は10ピクセル下に移動します。
私のDOCTYPE
はXHTML Transitional
に設定されています。
私はここで何が足りないのですか?
編集1
私の親は、上から下にピクセル単位で表示する必要がある背景があるため、厳密に定義された寸法を持つ必要があります。そのため、垂直マージンを設定すると、no goになります。
編集2
この動作は、FF、IE、およびCRでも同じです。
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
やマージントリックはあなたにそれを与えるでしょう。
これは通常の動作です(少なくともブラウザの実装では)。親がパディングを持たない限り、マージンはその親に対する子の位置に影響を与えません。その場合、ほとんどのブラウザは、子のマージンを親のパディングに追加します。
あなたが望む振る舞いを得るために、あなたは必要です:
.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;
}
子要素にスタイルdisplay:inline-block
を追加する
親要素は空である必要はなく、少なくとも子要素の前に
を置く必要があります。
これは私のために働いたものです
.parent {
padding-top: 1px;
margin-top: -1px;
}
.child {
margin-top:260px;
}
Div要素の表示プロパティをinline-blockに設定すると、.css>の内側でそれがわかります。それは問題を解決します。そしてマージンは期待通りに機能します。
私もこの問題を抱えていましたが、ネガティブマージンハックを防ぐために好まれました。
<div class="supercontainer"></div>
マージンの代わりにパディングがあるすべての周り。もちろんこれはより多くのdivitisを意味します、しかしこれはおそらくこれをきちんとしてもらうためにする最もきれいな方法です。
正解を知る前に見つけた別の解決策は、親要素に透明な枠を追加することでした。
あなたのボックスは、しかし余分なピクセルを使用します...
.parent {
border:1px solid transparent;
}
次のコードを使用して、意図しない動きのある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>
おもしろいことに、この問題に対する私のお気に入りの解決策はまだここで言及されていません:フロートを使うこと。
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;
に置き換えるだけです。
.child
内に含まれている要素のmargin
が折りたたまれています。
<html>
<style type="text/css" media="screen">
#parent {background:#dadada;}
#child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">
<p>&</p>
<div id="child">
<p>&</p>
</div>
</div>
</body>
</html>
この例では、p
はブラウザのデフォルトスタイルからmargin
を受け取ります。ブラウザのデフォルトのfont-size
は通常16pxです。 margin-top
で16px以上の#child
を持っていることによって、あなたはそれが位置の移動に気付き始めます。
"Div parent"を防ぐには、 "div child"のマージンを使用します。
親でこれらのcssを使用してください:
適切であれば、margin-top
の代わりにtop
を使用することも可能です。