body的margin和paddin是怎么理解的

fengzittt · 发表于 2020-1-6 02:50:01

帮我看看这个例子：
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 · 发表于 2020-1-9 08:09:01

帮顶了，学习中。。

sunray · 发表于 2020-1-11 17:36:01

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

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

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

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

cuixiaoyuok · 发表于 2020-6-13 12:45:01

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

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

leexiaolei · 发表于 2020-7-4 17:45:01

１.对于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 · 发表于 2020-7-22 14:30:01

body的外部容器该是html了吧

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

poluo006 · 发表于 2020-7-27 11:45:01

看注释和例子。
<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>

<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;,应该是标准不同。自己多试试就知道了。

252245609 · 发表于 2020-9-6 12:45:01

margin是外边距
padding是内

		自动登录	找回密码
密码			立即注册