How to understand the margin attribute of body_html/css

How to understand the margin attribute of body_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:47:53

Original

1556 people have browsed it

<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>

Copy after login

The effect of the above code in IE is
There is a certain distance between the div box and the browser boundary, but if the html code is changed to

<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>

Copy after login

, the display effect at this time is
The border of the div is almost close to the browser border
I would like to ask, doesn’t margin refer to the distance outside the box border? And the div is not in the internal code of the body box? Why setting the margin of the body will cause the distance between the div and the body to shrink? What I understand is that setting the padding of the body to 0px will make the distance between the div and the body become 0

Reply to discussion (solution)

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