VerySource

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 28|回复: 7

body的margin和paddin是怎么理解的

[复制链接]

1

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 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文件,学习中
回复

使用道具 举报

0

主题

2

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2020-1-9 08:09:01 | 显示全部楼层
帮顶了,学习中。。
回复

使用道具 举报

0

主题

27

帖子

17

积分

新手上路

Rank: 1

积分
17
发表于 2020-1-11 17:36:01 | 显示全部楼层
margin是外边距, 就是 容器与容器之间的距离
通常body div hr h1 等等display:block 的标签都可以当做容器看了
举个例子好比中国上海与日本东京之间的距离

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

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

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

使用道具 举报

0

主题

3

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2020-6-13 12:45:01 | 显示全部楼层
MARGIN
PADDING
以CSS手册的语言来说的话,MARGIN是外补丁,BODY其实还是有外容器的,可以理解为DOCUMENT,MARGIN设为0的话,也就是说BODY的四边和外容器的间距为0PX,因为BODY的MARGIN默认并不为0PX,所以注释掉的时候当然以它的默认值来算了

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

使用道具 举报

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2020-7-4 17:45:01 | 显示全部楼层
1.对于body而言,外部容器是整个页面.
对于body有个特殊的地方是不设magin为0时
body(注意是body)和页面之间有空白

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

回复

使用道具 举报

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2020-7-22 14:30:01 | 显示全部楼层
body的外部容器该是html了吧

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

使用道具 举报

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 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>
<!--<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;,应该是标准不同。自己多试试就知道了。
回复

使用道具 举报

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2020-9-6 12:45:01 | 显示全部楼层
margin是外边距
padding是内
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|CopyRight © 2008-2020|verysource.com ( 京ICP备17048824号-1 )

快速回复 返回顶部 返回列表