body的margin和paddin是怎么理解的
帮我看看这个例子：
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
}
------------------------------
我疑惑的是，对于body而言，外部容器是什么
如果注释了这句话 MARGIN: 0px;
<div id= "1 "> abcd </div> 的内容不能贴着浏览器的边框，why?
难道红色区域的上方和左右两侧是body外部的一个容器
但它的颜色怎么和body一样？
我是新手，最近在看一些网站的css文件，学习中
[解决办法]
帮顶了，学习中。。
[解决办法]
margin是外边距， 就是 容器与容器之间的距离
通常body div hr h1 等等display:block 的标签都可以当做容器看了
举个例子好比中国上海与日本东京之间的距离
padding是内补白，容器里面的内容通常为文本或图片等等 距离边框border的距离。好比上海和北京之间的距离。
一个是国家与国家之间的，一个是国家内部省或直辖市之间的距离了。
具体的可以去参考一下box 盒模型
[解决办法]
MARGIN
PADDING
以CSS手册的语言来说的话，MARGIN是外补丁，BODY其实还是有外容器的，可以理解为DOCUMENT，MARGIN设为0的话，也就是说BODY的四边和外容器的间距为0PX，因为BODY的MARGIN默认并不为0PX，所以注释掉的时候当然以它的默认值来算了
PADDING指的是内补丁，比如你放在TD或BODY中的文本和其它元素会被隔开,有点类似表格的间距
[解决办法]
１.对于body而言，外部容器是整个页面．
对于body有个特殊的地方是不设magin为０时
body（注意是body）和页面之间有空白
２.对于body而言，PADDING是body和内部元素的距离
楼主可以试下下面代码，然后再把style= "padding: 10px; "更改为style= "margin: 0px; "看效果
<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>
[解决办法]
body的外部容器该是html了吧
to hero4u(孤竹林)：感觉举的例子不够妥当……上海到北京的距离还可以理解上海或者北京这个元素的margin……
[解决办法]
看注释和例子。
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </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 ">
这一句等价于CSS中的margin:0px;在CSS中也可以这样写：
body{
BACKGROUND: #dfd;
margin-left:0px;
margin-right:0px;
margin-right:0px;
margin-bottom:0px;
PADDING: 0px;
}
其实他指的就是网页正文内容距浏览器窗口上下左右四个的边距，以上三种写法效果相同。
padding:为当前元素距他的父级元素上下左右的边距，在此效果和margin应该是相同的。看下面的例子。
-->
<div id= "1 ">
abcd
</div>
<br> padding的例子
<table width= "600 " border= "0 " cellpadding= "0 " cellspacing= "1 " bgcolor= "#FF0000 ">
<tr>
<td width= "305 " bgcolor= "#FFFFFF " style= "padding-left:50px; "> 距此单元格左侧50个象素的边距开始写内容 </td>
<td width= "295 " bgcolor= "#FFFFFF "> </td>
</tr>
<tr>
<td bgcolor= "#FFFFFF " style= "padding-left:10px; "> 距此单元格左侧1个象素的边距开始写内容 </td>
<td bgcolor= "#FFFFFF "> </td>
</tr>
<tr>
<td bgcolor= "#FFFFFF " style= "padding:50px; "> 不设具体方向则上下左右相同，都为50象素。在此你可以把这段文字理解为body,而单元格的上下左右四个边距理解为浏览器窗口的四个边界。 </td>
<td bgcolor= "#FFFFFF "> </td>
</tr>
</table>
</body>
</html>
另：你的background:red;的意思应该是设置div的背影颜色，但如果html页面的开头用了 <!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 "> 则你的background:red;就会失效，建议用background-color:red;,应该是标准不同。自己多试试就知道了。
