web-dev-qa-db-ja.com

<h1>のCSSマージントップは親のマージンに影響します

私はこの問題について今しばらく見ており、直接的な答えを見つけていません。要素にマージン上部を追加する場合、私の場合はほとんど見出しで発生します。多くの場合、マージントップは親と共有されます。

[〜＃〜] html [〜＃〜]

  <div>
      <h1>My title</h1>
    </div>

[〜＃〜] css [〜＃〜]

div{
  padding:20px;
}

h1{
 margin-top: 20px;
}

前のコードの結果も、次のようにdivにマージントップを追加します：

div{
  padding:20px;
  margin-top:20px; /*this one is implemented by the browser, not written on the code*/
}

これを解決する方法は、overflow:autoを親に、この場合はdiv cssに次のものがあります。

div{
  padding:20px;
  overflow:auto;
}

前の例は問題を解決しますが、私には明らかではありませんWHY ???。これは "collapsing margins"と関係があり、明らかにマージンは親のマージンと組み合わされています。しかし、なぜ????

親がいつ子のマージンを折りたたむか、そうでない場合、ブロックのこのプロパティの目的は何ですか、それはバグですか？

これが JSFiddleデモ の問題です。

そして、これは JSFiddle demo ソリューションの

ありがとう。

cssmargin
24
multimediaxp

ご回答ありがとうございました。@ gaurav5430が非常に正確な定義のリンクを投稿しましたので、この回答にまとめたいと思います。彼らがこの要素がこのように振る舞うべきであると決定した理由については、それはまだ私には不明です。しかし、少なくとも、マージンの縮小に適用されるルールを見つけることができました。

」と簡単に言えば、この定義は、2つの要素の垂直方向の余白が接触している場合、最大の余白値を持つ要素の余白のみが尊重され、一方、小さいマージン値はゼロに縮小されます

基本的に元の質問に関するこの例では、最大のマージントップは<h1>の1つであるため、親<div>に適用されます。

このルールは次の場合にキャンセルされます：

  • フローティング要素
  • 絶対に配置された要素
  • インラインブロック要素
  • オーバーフローが可視以外に設定されている要素（子でマージンを折りたたむことはありません。）
  • クリアされた要素（親ブロックの下マージンで上マージンを折りたたむことはありません。）
  • ルート要素

これが、overflow:hiddenが問題を解決した理由です。

ありがとう@ gaurav5430;ここにリファレンスがあります： http://reference.sitepoint.com/css/collapsingmargins

また、@ gaurav5430の答えはより簡単でわかりやすいことがわかりましたが、非常に優れたリソースを投稿してくれた@Adriftに感謝します。

19
multimediaxp

要素が最初の子である場合、それは親要素の余白を追加し、親要素の余白と折りたたまれます。

why時々マージンが崩壊しないことは W3 collapsing-margins section で明確に述べられています。

Padding-topまたはこの回避策を使用することをお勧めします。 子要素のマージンが親要素を移動します 、なぜならoverflow: hiddenは、付随的な損害を追加する可能性があります。

この例を参照してください： fiddle

HTML：

<div id="outside">
    <div id="div1">
        <h1>margin in parent</h1>
    </div>

    <div id="div2">&nbsp;
        <h1>margin inside</h1>
    </div>
</div>

CSS：

#outside {
    background-color: #ccc;
    border:1px solid #000;
}
#div1 {
  background-color: #66d;
}
#div1 h1 {
  margin: 20px 0 0 0;
}
#div2 {
  background-color: #6d6;
}
#div2 h1 {
  margin: 20px 0 0 0;
}
5
Andre Figueiredo

ここにちょっとした説明のある素敵な記事があります

http://reference.sitepoint.com/css/collapsingmargins

上記のリンクでこれを見つけてください...

親要素と子要素の間の折りたたみマージン

これまで、隣接する要素の折りたたみ効果についてのみ説明してきましたが、マージンが接触する親と子にも同じプロセスが当てはまります。 「タッチ」とは、隣接するマージンの間にパディング、ボーダー、またはコンテンツが存在しない場所を意味します。次の例では、親要素に子要素があり、その上に上余白が設定されています。

h1 {マージン：0;背景：#cff; } div {margin：40px 0 25px 0;背景：#cfc; } p {margin：20px 0 0 0;背景：＃cf9;上記のスタイルシートでは、p要素に対して上マージン値が宣言されていることがわかります。また、以下のコードの抜粋では、p要素がdiv要素の子であることがわかります。

見出しの内容

段落の内容

このコードの結果を図2に示します。

図2.子段落の折り畳みマージンh1要素と子p要素を持つdiv要素の間の折り畳みマージンの図h1要素と段落コンテンツの間に40ピクセルの垂直方向のギャップがあります。 div要素のmargin-topは40pxであり、p要素にはさらに20px margin-topがあるため、段落が見出しから60pxに配置されると予想したかもしれません。また、div要素の背景色の20pxが段落の上に表示されることを期待しているかもしれません。図2を見るとわかるように、マージンは一緒に折り畳まれて1つのマージンを形成しているため、これは起こりません。既に見たように、最大​​のマージンのみが適用されます（隣接するブロックの場合）。

実際、div要素に上マージンがなく、p要素に40pxのマージン上部がある場合、同じ結果が得られます。 p要素の40px margin-topは、事実上div要素の上余白になり、divを40pxだけページの下に押し込み、p要素を最上部にぴったりと入れ子にします。段落の上のdiv要素には背景は表示されません。 ...

1
gaurav5430

overflow：autoで問題を解決します。良くない、あなたはあなたのdivにIDまたはクラスを与えて、それからあなたのCSSでこれをやろうとしましたか？

#divID{
padding:auto;
}

#divID h1{
margin-top: 20px;
}

オーバーフローを使用しないでください。URDIV内にSELECTを追加すると、より多くの問題が発生する可能性があります。

CSSには、スタイルを設定する要素を指定できる3つの異なる方法があります。それぞれの方法は特定の目的に役立ちますが、3つすべてを一緒に使用することで、スタイルシートのカスケード機能を実際に活用できます。ページ上のオブジェクトを記述する3つの方法は、タグ名、ID、またはクラスによるものです。

0
Jeffery ThaGintoki