html - マージントップのアイテムは、収納ボックスの外側にマージンがあります

Question

私はこの効果に何かを持っています：

#div {
   background: green; 
   width: 200px;
   height: 100px;
}

h1 {
   margin-top: 100px;
}

（そして明らかにそれに伴ういくつかのHTMLがあります。）

これで、ブラウザでh1表示すると、の一番上にが表示され#div、100px余白がの一番上に表示され#divます。

誰かが理由を提案できますか？

（コードは少し複雑すぎて関連する部分を挿入できないので、誰も答えてくれない場合は投稿します。誰かがエラーなどを見つける可能性があります。）

score 16 · Accepted Answer

H1タグとは関係ありません。これはマージン崩壊と呼ばれるものです。

このテーマに関する投稿はこちらにあります: http://reference.sitepoint.com/css/collapsingmargins

いくつかの解決策があります：

score 1 · Accepted Answer

代わりにパディングを追加してみてください。私は前にこの種の問題を見たことがあります。パディングが同じことをする場合は、コンテナーの div を配置してみてください。h1を#divから下に移動したいだけの場合は、「h1を#div 'box'にさらに押し込む」ため、パディングが最善の策です。

3 に答える 3