How do body margin and paddin understand

fengzittt

Help me see this example:
a.html
-------------------------------------------------- -
<link href = "a.css" rel = "stylesheet" type = "text / css">
<div id = "1">
abcd
</ div>
-------------------------------

a.css
--------------------------------------
body {
BACKGROUND: #dfd;
/ * MARGIN: 0px; * /
PADDING: 1px;
}
#1 {
background: red;
text-align: center
}
------------------------------

What I am wondering is what is the outer container for the body
If you comment this sentence MARGIN: 0px;
The content of <div id = "1"> abcd </ div> cannot stick to the border of the browser, why?
Is the top and left sides of the red area a container outside the body?
But how is it the same color as the body?

I am a newbie, and recently I was looking at the css files of some websites, learning

leavitt_825

Bangding, learning. .

sunray

margin is the margin, which is the distance between the container
Usually body div hr h1 and other display: block tags can be viewed as containers
For example, the distance between Shanghai, China and Tokyo, Japan

Padding is internal padding. The content inside the container is usually text or images, etc. The distance from the border. It's like the distance between Shanghai and Beijing.

One is from country to country, and the other is the distance between provinces or municipalities within the country.

For details, please refer to the box model

cuixiaoyuok

MARGIN
PADDING
In the language of the CSS manual, MARGIN is an outer patch, and BODY actually has an outer container, which can be understood as DOCUMENT. If MARGIN is set to 0, that is, the distance between the four sides of BODY and the outer container is 0PX, because BODY’s MARGIN is not 0PX by default, so of course it is calculated by its default value when commented out

PADDING refers to the inner patch, for example, the text and other elements you put in TD or BODY will be separated, a bit similar to the spacing of the table

leexiaolei

1. For the body, the external container is the entire page.
There is a special place for the body when the magin is not set to 0
There is a gap between the body (note the body) and the page

2. For body, PADDING is the distance between body and internal elements

The landlord can try the following code, and then change style="padding: 10px;" to style="margin: 0px;" to see the effect

<html>
<head>
<title>Untitled Document</title>
</head>

<body style="padding: 10px;">
<table width="500" height="500" border="1" cellpadding="0" cellspacing="0" bordercolor="#0000FF">
  <tr>
    <td align="left" valign="top">sgddfgsd</td>
  </tr>
</table>
</body>
</html>

a11004170

Should the outer container of the body be html?

tosunray: I feel that the example is not appropriate... The distance from Shanghai to Beijing can also understand the margin of Shanghai or Beijing...

poluo006

See notes and examples.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled document</title>
<style type="text/css">
body{
BACKGROUND: #dfd;
MARGIN: 0px;
PADDING: 0px;

}
div#1 {
background:red;
text-align:center;
}
</style>
</head>

<body>
<!--<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
This sentence is equivalent to margin:0px in CSS; it can also be written like this in CSS:
body{
BACKGROUND: #dfd;
margin-left:0px;
margin-right:0px;
margin-right:0px;
margin-bottom:0px;
PADDING: 0px;
}
In fact, he refers to the four margins between the top, bottom, left, and right of the webpage body content from the browser window. The above three writing methods have the same effect.
padding: is the upper, lower, left, and right margins of the current element from its parent element, where the effect and margin should be the same. Look at the example below.
-->
<div id="1">
abcd
</div>
<br>Padding example
<table width="600" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF0000">
  <tr>
    <td width="305" bgcolor="#FFFFFF" style="padding-left:50px;">A margin of 50 pixels from the left of this cell to start writing content</td>
    <td width="295" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="padding-left:10px;">1 pixel margin from the left of this cell to start writing content</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="padding:50px;">If the specific direction is not set, the up, down, left, and right are the same, both are 50 pixels. Here you can understand this text as body, and the upper, lower, left, and right margins of the cell as the four boundaries of the browser window. </td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Another: your background:red; means to set the back color of the div, but if you use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ /www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> your background: red; will be invalid, it is recommended to use background-color: red;, it should be a different standard. Try it yourself to find out.

252245609

margin is the margin
padding is inside