2017-07-05 8 views
1

こんにちは私は問題があり、ウェブでうまく説明された答えが見つかりません。H1タグはdivを押し下げます

2番目のdivにh1タグを含むテキストを入力するとdivが2つ表示されます。私がマージントップを大きくしても。

マイコード:

<!DOCTYPE html> 
<html lang="nl"> 
    <head> 
    <meta charset="UTF-8" /> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link href="css/normalize" rel="stylesheet" /> 
    <style> 

     #one { 
     width: 100%; 
     height: 50px; 
     background-color: red 
     } 

     #two { 
     width: 100%; 
     height: 150px; 
     background-color: blue 
     } 

     h1 { 
     margin: 50px 0; 
     } 

    </style> 
    </head> 
    <body> 
    <div id="one"> 

    </div> 
    <div id="two"> 
     <h1>Hoi</h1> 
    </div> 
    </body> 
</html> 

例ピクチャー Example Picture

答えて

2

二つ以上の(または親と子)箱の隣接するマージンは単一マージンを形成するために組み合わせることができますが、この組み合わせは、折りたたまれたマージンと呼ばれています。

W3Cリファレンス:https://www.w3.org/TR/CSS2/box.html#collapsing-margins

そのデフォルトとは異なる(可視)オーバーフローの任意の値は、崩壊を防止する親に適用されます。

overflow: hiddenをdiv #twoで使用して解決します。

関連する問題