この CSS マージントップスタイルが機能しないのはなぜですか?
P粉512729862
2023-08-23 23:07:58
<p>別の <code>div</code> 内の <code>div</code> に <code>margin</code> 値を追加してみました。最高値以外はすべて正常に動作しますが、最高値は無視されているようです。しかし、なぜ？ </p>
<p>私の期待:</strong></p><p><br /></p>
<p><strong>得たもの:</strong></p><p><br /></p>
<p><strong>コード: </strong></p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#outer {
幅: 500ピクセル;
高さ: 200ピクセル;
背景: #FFCCCC;
マージン: 50px 自動 0 自動;
表示ブロック;
}
#インナー{
背景: #FFCC33;
マージン: 50 ピクセル 50 ピクセル 50 ピクセル 50 ピクセル;
パディング: 10px;
表示ブロック;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="outer">
<div id="inner">
こんにちは世界！
</div>
</div></pre>
<p><br /></p>
<p>W3Schools は、<code>margin</code> でこの問題が発生する理由を説明していません。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
内部の
divでdisplay: inline-block;を使用してみてください。このような：＃＃＃ リーリー実際に表示されるのは、
以下は W3C 仕様の関連点です:#inner要素の上端のマージンです。 は#outer要素の上端に折りたたまれ、## だけが残ります。 ##outer余白はそのままです (画像には示されていませんが)。 2 つのボックスの上端は、マージンが等しいため、互いに面一になります。マージンが崩れるのを防ぐには、次のいずれかを実行できます:
上記のオプションは、次の理由によりマージンの崩壊を防ぎます:
左マージンと右マージンは次の理由により期待どおりに動作します。