<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>
<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>
The big box contains the small box, the body is the big box, and the div is the small box. The entire document can be regarded as a larger box containing the body
body It has a margin value. If the margins around the body are removed, the body as a whole will be adjusted. Just like the position of a big box moves, the things inside the big box will of course move accordingly
The margin is the outside distance, outside the border. padding is the padding, within the border, and is the distance between the content area and the border.
The body itself is also a box. The default margin may not be 0, so there is a certain distance from the edge of the window.
After the body's margin is set to 0, it will be close to the window border. outerBox is the element inside the body box.
You add a body to the body and see the effect.
BODY The default
margin is 4px;
padding is 0px
Please note the difference from other html tags