body的margin和paddin是怎么理解的

fengzittt

帮我看看这个例子：
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文件，学习中

leavitt_825

帮顶了，学习中。。

sunray

margin是外边距， 就是 容器与容器之间的距离
通常body div hr h1 等等display:block 的标签都可以当做容器看了
举个例子好比中国上海与日本东京之间的距离

padding是内补白，容器里面的内容通常为文本或图片等等 距离边框border的距离。好比上海和北京之间的距离。

一个是国家与国家之间的，一个是国家内部省或直辖市之间的距离了。

具体的可以去参考一下box 盒模型

cuixiaoyuok

MARGIN
PADDING
以CSS手册的语言来说的话，MARGIN是外补丁，BODY其实还是有外容器的，可以理解为DOCUMENT，MARGIN设为0的话，也就是说BODY的四边和外容器的间距为0PX，因为BODY的MARGIN默认并不为0PX，所以注释掉的时候当然以它的默认值来算了

PADDING指的是内补丁，比如你放在TD或BODY中的文本和其它元素会被隔开,有点类似表格的间距

leexiaolei

１.对于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>

a11004170

body的外部容器该是html了吧

to sunray：感觉举的例子不够妥当……上海到北京的距离还可以理解上海或者北京这个元素的margin……

poluo006

看注释和例子。
<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">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="padding-left:10px;">距此单元格左侧1个象素的边距开始写内容</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="padding:50px;">不设具体方向则上下左右相同，都为50象素。在此你可以把这段文字理解为body,而单元格的上下左右四个边距理解为浏览器窗口的四个边界。</td>
    <td bgcolor="#FFFFFF">&nbsp;</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;,应该是标准不同。自己多试试就知道了。

252245609

margin是外边距
padding是内