body的margin和paddin是如何理解的
日期：2014-05-17 浏览次数：20688 次
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 " bg
帮我看看这个例子：
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 " bg
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
