ホームページ > 記事 > ウェブフロントエンド > body_html/css_WEB-ITnoseのmargin属性の見方
body_html/css_WEB-ITnoseのmargin属性の見方
- WBOYオリジナル
- 2016-06-24 11:47:531547ブラウズ
<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 タグとの違いに注意してください
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。