Question

margin 和padding区别

查了很久还是不明白，网上的资料基本都是一样，我只知道这和盒子模式有关，但怎么也理解不了。
一，margin叫边界手册上叫外补丁，padding是填充内补丁，在他们之间有一个边界border。padding包围的就是content，
那么这个盒子是不是就是最外层的div，按照从外到内，margin，border，padding，content？这个margin是不是和border的距离？二,比如说最外层height:800px;width:800px;margin:1px 1px 1px 1px;其他忽略，content是不是距离最外层的div都是1px？那么content就是798px;798px;如果margin为1,border为1，那么content距离margin是不是就2px，因为中间多了一个border为1。content的大小为796,796。三，如果margin为1,padding为1没有写border，content的大小为798,798。四：margin和padding是不是都有填充的意思。为什么我总感觉padding和margin通用，都是把content范围缩小。

Answer 1

（你的意思我没有完全明白过来，所以可能我的了解和你的了解上有点分歧。）
margin和border影响都是对外的，就是说，在里面的表不会因为这两个值改变而改变。padding影响是对内的，会影响在其定义的表内部的表。
一、margin是和border的距离；
二、content距离最外层的div都是1px。如果margin为1,border为1，那么content距离margin还是1PX，因为border是会在原来大小上向外加上的。（这点你可以自己建两个div对比查看。像这样：<div style="width:203px; height:50px; border:50px solid red"></div>
<div style="width:203px; height:50px; border:1px solid red"></div>）
三、margin是对外的，padding是对内的，margin不影响内表，你的content大小是799，799。
四：margin和padding都有填充的意思。padding会让content范围缩小，而margin不会。
给你一个例子，复制到body里：（你可以把border放大来对比查看效果）
-------------------
<div style="width:400px; height:400px; background-color:#CCFF66;border:blue 1px solid; position:inherit">
<div style="margin:10px; padding:10px; width:300px; height:300px; border:red 1px solid; background-color:#CCCCCC; position:inherit">显示内容与红色线之间的距离就是padding定义的，红线与蓝线之间的距离就是margin定义的(以左上角为准)</div>
</div>

Answer 2

1.对与一个Page 中Div的顺序就是Margin border padding content.
2.content的大小就是800×800.如果是padding:1px.那么大小才是798×798.可以这么说，padding，border 是占据Div的宽度的，Margin是不占据DiV的宽度的。
3对的。
4，还是同理，对于一个固定大小的Div设置margin不会影响content的范围。

建议LZ到firefox下载个tool自己测试下印象更深刻。

Answer 3

margin 比如你要设定一个图片在页面的整体位置时 用margin
padding 是你在这个图片内部设定按钮什么时 用padding

Answer 4

去我百度空间看看，我给你这个问题写了篇文章。(⊙o⊙)