margin-top が親要素に作用しない理由-CSSチュートリアル-php.cn

margin-top が親要素に作用しない理由

巴扎黑

リリース： 2017-06-28 13:44:04

オリジナル

1702 人が閲覧しました

margin-topが親要素に作用しない理由:
推奨事項: 可能な限りコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。
margin-top 属性の基本的な使用法については、これ以上に簡単なことはありません。つまり、オブジェクトの上部 margin を設定するということです。次のコード例を参照してください。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>为什么margin-top不是作用于父元素</title><style type="text/css"> * 
{ 
  margin:0px; 
  padding:0px; 
} p 
{ 
  width:100px; 
  height:100px; 
  background-color:green; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
  <p></p> 
</body> 
</html>

ログイン後にコピー

上記のコードは、p の上部マージンを 50px に設定できます。次のコードを見てみましょう:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><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> 
<p id="parent"> 
  <p id="children"></p> 
</p> 
</body> 
</html>

ログイン後にコピー

上記のコードの本来の目的は次のとおりです。子要素の上部を親要素から50px離すようにしましたが、実際にはそうではありません。期待した効果は得られませんが、子要素の上部が親要素に近く、margin-topが親要素に転送され、親要素が上部マージンを生成できるようになります。これは実際には典型的なマージン結合の問題ですが、すべてのブラウザでこの現象が発生するわけではありません。一般に、標準ブラウザではこの現象が発生し、IE6 および IE7 ではこの状態ではマージン結合が発生しません。上マージンのマージが発生する条件:

1. 親要素の上マージンと子要素の上マージンの間に境界線がない。

親要素の上マージンと子要素の上マージンの間に空でないコンテンツはありません。

3.
親要素の上マージンと子要素の上マージンの間にパディングはありません。

3. 親要素と子要素には、位置決め属性 (static および相対を除く)、overflow
(visible を除く)、および display
:inline-block が設定されていません。 4. 親要素やリソースのフローティングはありません。
注: 上記の条件が満たされている必要があります。この状況を解決する方法も非常に簡単で、上記の状況のいずれかを破棄するだけです。
証拠金結合の詳細については、証拠金結合の詳細な説明の章を参照してください。

以上がmargin-top が親要素に作用しない理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。