ネストされたdivのマージン上部
ネストされたdivのmargin-topに問題があります-ネストされたdivにmargin-topを適用すると、親divにマージンが適用されます代わりにネストされたdivの。
何か案は？
マージンは設計により崩壊します。同様に1ピクセルのパディングを追加すると、正常に機能します。
親divでoverflow：autoを使用してソリューションを取得します。
これがマージンの仕組みです。マージンは、マージン/パディング/類似の次の要素間のスペースです。親要素として必ずしも定義されているわけではありません。 仕様を確認してください 。
回避策としてできることは次のとおりです。
代わりにパディングを使用してください
これは、margin-top: 10px;を使用する代わりにpadding-top: 10px;を使用することを意味します。これはあらゆる機会に適しているわけではありません。
私が発見した奇妙なハック
最初はこれを発見したとは思いませんが、先日このような問題を解決しました。私も<div id="header" />を持っているので、上マージンも付けたいのですが、その上マージンも親（body要素）を押し下げていました。 body要素でこれを行いました...
body {
padding-top: 1px;
margin-top: -1px;
}
これにより私のマージンが機能しました。 border: 1px solid #cccなどの境界線を使用することもできます。
また、CSSコメントにメモを残して、その独特のルールのペアがある理由を説明することも賢明です。 /* this is to stop collapsing margins */を追加しました。
参考文献
Overflow：autoがネストされたmargin-topを許可するように親divを変更する理由は、新しいフォーマットコンテキストを作成するためです。絶対、固定、フロート、または可視以外のオーバーフローで配置されたdivは、新しいフォーマットコンテキストを作成します。親divは、この新しいフォーマットコンテキストのルートになり、折りたたみマージンは適用されません。ルート要素に。
さらに詳しく：
書式設定コンテキストはインラインまたはブロックのいずれかであり、ブロック書式設定コンテキストのみがマージンを縮小します。これらの書式設定コンテキストは、ドキュメントのフローを形成します。
ブロックフォーマッティングコンテキストは、ドキュメント/コンテナの終わりまで、または新しいフォーマッティングコンテキストが確立されるまで、包含ブロック内で次々に垂直にレイアウトされたすべてのブロックレベル要素（div、p、tableなど）です。
ネストの場合、両方のdivがブロック書式設定コンテキストの一部であるため、子のマージン上部は親のマージン上部と一緒に折りたたまれます。オーバーフローをautoに設定すると、親divが新しい書式設定コンテキストのコンテナーになり、子がその内部の最初のブロック要素になります。したがって、親divがルートになったため、2つのマージンは「隣接」しなくなりました。
お役に立てば幸いです。
ボックスモデル： http://www.w3.org/TR/CSS2/box.html#collapsing-margins
視覚的なフォーマットモデル： http://www.w3.org/TR/CSS2/visuren.html#normal-flow
「マージンの縮小」が問題です。ここで、それが何であり、なぜまだ生きているのかを理解できます： http://www.sitepoint.com/web-foundations/collapsing-margins/
Web全体を読んで適切な解決策を探し、最終的にこの記事を見つけました： http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html =
要するに、あなたはあなたの問題を解決するための多くの方法を持っています：
1）親divの境界線（透明にすることができます）
2）親divのパディング
3）オーバーフロー：自動
4）フロート：左
すべてのソリューションを詳細に説明しているため、リンクをたどる必要があります。
内部divの位置プロパティを使用してこれを修正することもできます。お気に入り：
position:fixed;