margin-top が親 element_html/css_WEB-ITnose に作用しない理由-htmlチュートリアル-php.cn

margin-top が親 element_html/css_WEB-ITnose に作用しない理由

WBOY

リリース： 2016-06-24 11:41:23

オリジナル

1080 人が閲覧しました

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