div_html/css_WEB-ITnose 内の div の内側と外側の境界線に関する問題-htmlチュートリアル-php.cn

div_html/css_WEB-ITnose 内の div の内側と外側の境界線に関する問題

WBOY

リリース： 2016-06-21 09:46:35

オリジナル

1568 人が閲覧しました

CSS マージンパディング

<body>	    <div style="background: blue;margin: 10px;">	<img alt="" src="../images/eg_arrow.gif" style="margin:50px; padding: 50px;">	<div style="margin: 20px;padding: 30PX;background-color: red">		hello	</div>   </div>   <div style="background: green;margin: 10px;">	<span>world</span>   </div></body>

ログイン後にコピー

ディスカッションへの返信 (解決策)

LZ は、内部 DIV が外部 DIV と重ならないように、外部 DIV のスタイルを padding: 20px に設定する必要があります

LZ外部 DIV スタイルを設定する必要があります:padding:20px、内部 DIV は外部 DIV と重なりません

これはわかっています。マージンが機能しない理由を知りたいだけです。

理解しているようです: ネストの場合: 要素が同じ場合、隣接するマージンは重なり、要素が異なる場合は、より大きいマージンにのみ依存します。。 (マージンは透明です); 同じレベル: 大きいマージンに応じて、同じ要素の隣接する辺のマージンが重なり合います。さまざまな要素の余白が重なっています。

あはは、これについては詳しく調べていません。学びました

LZ は内部 DIV が外部 DIV と重ならないように、外部 DIV のスタイルをpadding: 20px に設定する必要があります

これはわかりました。マージンが機能しない理由を知りたいだけです。

理解しているようです: ネストの場合: 要素が同じ場合、隣接するマージンは重なり、要素が異なる場合は、より大きいマージンにのみ依存します。。 (余白は透明です); 同じレベル: 大きい余白に応じて、同じ要素の隣接する辺の余白が重なり合います。さまざまな要素の余白が重なっています。

詳細な参照: http://blog.csdn.net/chx10051413/article/details/12572701

margin+padding+border+width/height は要素が占める領域です

margin は 2 つの要素間のスペースです距離。この距離は上書きできます。パディングは親要素と子要素の間で使用されます。

主な理由は、外部 div の高さを設定していないため、外部 div の最低位置は赤い背景の高さに依存します。外部 div の高さを設定すれば問題ありません。実際、設定した赤い背景の div のマージンは、下部には意味がありません。