htmlやcssを学んでいると、いつも分からないのが<body>のマージン。
マージンとはボーダーの外側の余白であるはずなのに、<body>の場合内側にあるように見えるのはなぜなのだろう?
いつもググリにググって調べるのだけれど、なるほどという回答に巡り合えません。
もう、やぶれかぶれで、<body>にボーダーを、<html>に背景色を設定してみました。
するとbodyのマージンがボーダーの外側に現れたようにみえる・・・???
<body>のマージンは<html>との間の余白だったようなのだけれど、それにしても<html>に背景色を指定しない場合<body>と同じ色になってしまうので分かりにくいのです。
css
html {background-color: aqua
}
body {background-color: #000;
margin: 100px;
padding: 50px;
border:solid 3px red
}
#box {background-color: yellow;
width:100px;
height: 100px;
}
そもそも、モニター画面を全体をbodyそのものだと思い込んでいたことが誤解の原因だったような・・・
なるほど、ググっても何もみつからないのは当然。
長い間こんなことで悩んでいたのは私だけかもしれないと思うと可笑しい。