body_html/css_WEB-ITnoseのmargin属性の見方-htmlチュートリアル-php.cn

body_html/css_WEB-ITnoseのmargin属性の見方

WBOY

リリース： 2016-06-24 11:47:53

オリジナル

1557 人が閲覧しました

<html><head><style type="text/css">#outerBox{	width:128px;	height:128px;	border:10px black dashed;	background:silver;}</style></head><body>	<div id="outerBox">	</div></body>

ログイン後にコピー

IEでの上記コードの効果は
divボックスとブラウザの境界線の間には一定の距離がありますが、HTMLコードを

<html><head><style type="text/css">#outerBox{	width:128px;	height:128px;	border:10px black dashed;	background:silver;}body{margin:0px;}</style></head><body>	<div id="outerBox">	</div></body>

ログイン後にコピー

に変更すると
この時の表示効果は
divの境界線はブラウザの境界線にほぼ隣接しています
マージンとはボックスの境界線の外側の距離を指すのかな？そして、divはボディボックスの内部コードにありませんか？ボディのマージンを設定すると、div とボディの間の距離が縮むのはなぜですか? 私が理解しているのは、ボディのパディングを 0px に設定すると、div とボディの間の距離が 0 になるということです

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

大きなボックスには小さなボックスが含まれており、ボディは大きなボックスであり、div は小さなボックスです

ボディ自体は余白を持っています。ボディの周囲のマージンを削除すると、ボディ全体が調整されます。調整は大きなボックスの位置を移動するようなものです。そうすると、当然、大きなボックス内のものも一緒に移動します

マージンは外側のマージンです。国境の外。 padding は境界線内のパディングであり、コンテンツ領域と境界線の間の距離です。
ボディ自体もボックスです。デフォルトのマージンは 0 ではないため、ウィンドウの端から一定の距離があります。
ボディのマージンを 0 に設定すると、ウィンドウの境界線に近くなります。 innerBox は、ボディボックス内の要素です。
ボディにボーダーを追加して、その効果を確認します。

BODY のデフォルト
マージンは 4px;
パディングは 0px
他の HTML タグとの違いに注意してください