マージントッププッシュアウターディビジョンダウン

ラッパーdivの最初の要素としてヘッダーdivがありますが、ヘッダーdiv内のh1に上部マージンを追加すると、ヘッダーdiv全体が押し下げられます。これは、ページの最初に表示される要素に上余白を適用すると必ず発生します。

これはサンプルコードスニペットです。ありがとう！

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}

<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

overflow:auto親に置くdiv
このリンクでもっと見る

私はこれがなぜ起こるかの固体の説明を持っていないが、私は変更することで、これを修正したtop-marginのtop-paddingか、追加display: inline-block要素のスタイルに。

編集：これは私の理論です

余白が崩れる（組み合わされる）方法と関係があると感じています。

W3C折りたたみマージンから：

この仕様では、マージンを折りたたむという表現は、2つ以上のボックス（隣り合っているかネストされている可能性があります）の隣接するマージン（空でないコンテンツ、パディングまたは境界領域、またはクリアランスがない）を組み合わせて、1つのマージンを形成することを意味します。

私の理論では、最初の要素はボディの隣にあるため、2つのマージンが組み合わされてボディに適用されます。これにより、ボディのコンテンツは、ボックスモデルに従って適用された折りたたまれたマージンの下から開始します。

マージンが崩れない状況があります。これは、（Collapsing Marginsから）試してみる価値があります。

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

これは、親子要素間のマージンの縮小を回避する方法の一部です。残りのスタイリングによく合うものを使用します。

• display以外に設定しblockます。
• float以外に設定しnoneます。
• マージンを削除して、代わりに使用してくださいpadding。たとえば、があった場合はmargin-top: 10px、に置き換えpadding-top: 10px;ます。
• 余白を削除し、代わりに使用しますposition（absoluteまたはrelative）属性を持つtop、bottomなどたとえば、あなたが持っていたならばmargin-top: 10px、と交換してくださいposition: relative; top: 10px;。
• マージンが折りたたまれている側に、親要素にa paddingまたはa を追加します。ボーダーは1pxで透明にすることができます。border
• 親要素overflow以外visibleに設定します。

これは古い問題であることを知っています。何度も遭遇しました。問題は、ここでのすべての修正がハッキングであり、意図しない結果をもたらす可能性があることです。

まず、根本的な問題の簡単な説明があります。マージンの折りたたみの仕組みにより、コンテナー内の最初の要素に上部マージンがある場合、その上部マージンは親コンテナー自体に効果的に適用されます。以下を実行することで、これを自分でテストできます。

<div>
    <h1>Test</h1>
</div>

デバッガーでこれを開き、divにカーソルを合わせます。H1要素の上部マージンが停止する場所にdiv自体が実際に配置されていることに気づくでしょう。この動作はブラウザによって意図されています。

だから、ここのほとんどの投稿がするように、奇妙なハックに頼る必要なしにこれに簡単な修正があります（侮辱は意図されていません、それは真実です）-単に元の説明に戻って...if the first element inside a container has a top margin...ください--その後、あなたは必要です上余白を持たないコンテナの最初の要素。わかりましたが、ドキュメントに意味的に干渉しない要素を追加せずにそれを行うにはどうすればよいでしょうか。

かんたん！疑似要素！これは、クラスまたは事前定義のミックスインを使用して行うことができます。:before擬似要素を追加します。

クラスを介したCSS：

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

これにより、上記のマークアップの例に従って、divを次のように変更します。

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

なぜこれが機能するのですか？

コンテナの最初の要素に上マージンがない場合は、次の要素の上マージンの開始位置を設定します。:before疑似要素を追加することにより、ブラウザは実際には非意味（つまり、SEOに適した）要素を最初の要素の前の親コンテナに追加します。

Q.なぜ高さが.0000001emなのですか？

A.ブラウザがマージン要素を押し下げるには高さが必要です。この高さは実質的にゼロですが、それでも親コンテナ自体にパディングを追加できます。実質的にゼロであるため、コンテナのレイアウトにも影響しません。綺麗な。

これで、クラス（またはSASS / LESSではミックスイン）を追加して、要素で他のことを実行したいときに予期しない結果を引き起こす奇妙な表示スタイルを追加する代わりに、この問題を修正して、意図的に要素のマージンを取り除くことができますおよび/またはそれをパディング、または実際にはこの問題を解決することを意図していない奇妙な位置/浮動小数点スタイルに置き換える。

display: flexこの場合は機能します。親要素display: flex;を指定し、要件に応じてh1タグにマージンを設定します。

今日この問題に遭遇します。

overflow: hidden より多くの要素をフォローしたところ、期待どおりに機能しませんでした。

だから私は親divの表示プロパティを変更して試してみdisplay: flexました!!!

これが誰かを助けることを願っています。:)

親要素の上部に小さなパディングを追加すると、この問題を解決できます。

.parent{
  padding-top: 0.01em;
}

これは、オーバーラップエフェクトを作成する場合など、親要素の外側にある要素を親要素の外側に表示する必要がある場合に便利です。

これは、マージンの崩壊が原因で発生します。子要素が親要素の境界に接触し、マージンが適用されている場合：

1. 最大のマージンが勝ちます（適用されます）。

2. それらのいずれかにマージンがある場合、両方が同じを共有します。

ソリューション

1. 親と子を分離させる親に境界線を適用します。
2. 親と子を分離する親にパディングを適用します。
3. 親ではなくオーバーフローを適用します。
4. beforeまたはafterを使用して、親divに仮想要素を作成します。これにより、マージンを適用した子と親が異なる場合があります。
5. マージンを適用した子と親の間に1つのhtml要素を作成して、それらを分離することもできます。