ラッパー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>
put overflow:auto
親のdiv
このリンクの詳細を参照
なぜこれが起こるのかについて確固たる説明はありませんが、top-margin
をtop-padding
に変更するか、要素スタイルにdisplay: inline-block
を追加することでこれを修正しました。
編集:これは私の理論です
私は、マージンがどのように折り畳まれている(組み合わされている)かに関係があると感じています。
from W3C折りたたみマージン :
この仕様では、マージンを折りたたむという表現は、2つ以上のボックス(互いに隣接またはネストされている可能性がある)の隣接するマージン(空ではないコンテンツ、パディングまたは境界領域、またはそれらを分離するクリアランス)が結合して単一のマージンを形成することを意味します。
私の理論では、最初の要素はボディの隣にあるため、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;
。padding
またはborder
を、マージンが折りたたまれている側に親要素に追加します。境界線は1ピクセルで透明にすることができます。overflow
をparent要素のvisible
以外に設定します。私はこれが古い問題であることを知っています。何度も遭遇しました。問題は、ここでの修正はすべて、意図しない結果をもたらす可能性のあるハッキングであるということです。
まず、根本的な問題の簡単な説明があります。マージンの折りたたみの仕組みにより、コンテナ内の最初の要素に上マージンがある場合、その上マージンは親コンテナ自体に効果的に適用されます。以下を実行して、自分でこれをテストできます。
<div>
<h1>Test</h1>
</div>
デバッガーでこれを開き、divにカーソルを合わせます。 div自体は、実際にはH1要素の上部マージンstopsに配置されていることがわかります。この動作はブラウザが意図したものです。
このため、ここでの投稿のほとんどが行うように、奇妙なハッキングに頼ることなく、これに対する簡単な修正があります(in辱は意図されていません、その真実です)-単に元の説明に戻ります-...if the first element inside a container has a top margin...
-その後、したがって、コンテナ内の最初の要素である[〜#〜] not [〜#〜]には上マージンが必要です。わかりましたが、ドキュメントにセマンティックに干渉しない要素を追加せずに、どのようにそれを行いますか?
簡単!擬似要素!これは、クラスまたは事前定義されたミックスインを介して行うことができます。 :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に適した)要素を親コンテナーに追加しますbefore最初の要素。
Q.なぜ高さ:.0000001em?
A.ブラウザがマージン要素を押し下げるには、高さが必要です。この高さは事実上ゼロですが、それでも親コンテナ自体にパディングを追加できます。実質的にゼロであるため、コンテナのレイアウトにも影響しません。綺麗な。
これで、要素を使って他のことをしたいときに予期しない結果を引き起こす奇妙な表示スタイルを追加し、意図的に要素のマージンを削除する代わりに、クラスを追加することができますおよび/またはパディング、または実際にこの問題を解決することを意図していない奇妙な位置/フロートスタイルに置き換えます。
display: flex
はこの場合に機能します。親要素にdisplay: flex;
その後、要件に応じてh1
鬼ごっこ。
今日この問題に遭遇します。
overflow: hidden
は、さらに要素が続くと期待どおりに動作しませんでした。
それで、親divの表示プロパティとdisplay: flex
働きました!!!
これが誰かを助けることを願っています。 :)
これは、マージンの崩壊が原因です。子要素が親要素の境界に触れ、それらのいずれかにマージンが適用されると、次のようになります。
最大のマージンが勝ちます(適用されます)。
それらのいずれかにマージンがある場合、両方が同じを共有します。
ソリューション
親要素の上部に小さなパディングを追加すると、この問題を解決できます。
.parent{
padding-top: 0.01em;
}
これは、重なり合う効果を作成する場合など、親の内側にある要素を親要素の外側に表示する必要がある場合に便利です。