ホームページ > 記事 > ウェブフロントエンド > margin-top が親 element_html/css_WEB-ITnose に作用しない理由
margin-top が親 element_html/css_WEB-ITnose に作用しない理由
- WBOYオリジナル
- 2016-06-24 11:41:231084ブラウズ
margin-top が親要素に作用しない理由:
margin-top 属性の基本的な使用法は簡単です。つまり、オブジェクトの上マージンを設定します。次のコード例を参照してください:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> * { margin:0px; padding:0px; } div { width:100px; height:100px; background-color:green; margin-top:50px; } </style> </head> <body> <div></div> </body> </html> 上記のコードは、div の上部マージンを 50px に設定できます。次のコードを見てみましょう:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> #parent { width:200px; height:200px; background-color:red; } #children { width:60px; height:60px; background-color:green; margin:0px auto; margin-top:50px; } </style> </head> <body> <div id="parent"> <div id="children"></div> </div> </body> </html> 上記のコードの本来の目的は、子要素の上部は親要素から 50px 離れていますが、実際には実装されていません。期待される効果は、子要素の上部が親要素に近くなり、margin-top が親に転送されるように見えることです。要素を使用して、親要素が上部マージンを生成できるようにします。これは実際には典型的なマージン結合の問題ですが、すべてのブラウザでこの現象が発生するわけではありません。一般に、標準ブラウザではこの現象が発生し、IE6 および IE7 ではこの状態ではマージン結合が発生しません。上マージンのマージが発生する条件:
1. 親要素の上マージンと子要素の上マージンの間に境界線がない。
2. 親要素の上マージンと子要素の上マージンの間に空でないコンテンツはありません。
3. 親要素の上マージンと子要素の上マージンの間にパディングはありません。
3. 親要素、子要素には位置決め属性(static、relativeを除く)、overflow(visibleを除く)、display:inline-block等は設定されていません。
4. 親要素やリソースのフローティングはありません。
注: 上記の条件が満たされている必要があります。この状況を解決する方法も非常に簡単で、上記の状況のいずれかを破棄するだけです。
元のアドレス: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/506.html