web-dev-qa-db-ja.com

マージントップ外側のdivを押し下げる

ラッパー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>
htmlcssxhtml
123
Danny

put overflow:auto親のdiv
このリンクの詳細を参照

186
JuanPablo

なぜこれが起こるのかについて確固たる説明はありませんが、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
33
digitaldreamer

これは、親子要素間のマージンの崩壊を回避する方法の一部です。スタイリングの残りの部分に適したものを使用します。

  • 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以外に設定します。
15
Jesús Carrera

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

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

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

これで、要素を使って他のことをしたいときに予期しない結果を引き起こす奇妙な表示スタイルを追加し、意図的に要素のマージンを削除する代わりに、クラスを追加することができますおよび/またはパディング、または実際にこの問題を解決することを意図していない奇妙な位置/フロートスタイルに置き換えます。

4
dudewad

display: flexはこの場合に機能します。親要素にdisplay: flex;その後、要件に応じてh1 鬼ごっこ。

2
Bijay

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

overflow: hiddenは、さらに要素が続くと期待どおりに動作しませんでした。

それで、親divの表示プロパティとdisplay: flex働きました!!!

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

0
Libin

これは、マージンの崩壊が原因です。子要素が親要素の境界に触れ、それらのいずれかにマージンが適用されると、次のようになります。

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

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

ソリューション

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

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

.parent{
  padding-top: 0.01em;
}

これは、重なり合う効果を作成する場合など、親の内側にある要素を親要素の外側に表示する必要がある場合に便利です。

0
adamspruijt