ホームページ > 記事 > ウェブフロントエンド > margin-top が親要素に作用しない理由
margin-top が親要素に作用しない理由
- 巴扎黑オリジナル
- 2017-06-28 13:44:041642ブラウズ
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 ではこの状態ではマージン結合が発生しません。上マージンのマージが発生する条件:
親要素の上マージンと子要素の上マージンの間に空でないコンテンツはありません。
3.
親要素の上マージンと子要素の上マージンの間にパディングはありません。
3. 親要素と子要素には、位置決め属性 (static および相対を除く)、overflow
(visible を除く)、および display
:inline-block が設定されていません。 4. 親要素やリソースのフローティングはありません。
注: 上記の条件が満たされている必要があります。この状況を解決する方法も非常に簡単で、上記の状況のいずれかを破棄するだけです。
証拠金結合の詳細については、証拠金結合の詳細な説明の章を参照してください。
以上がmargin-top が親要素に作用しない理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。