css里面padding 与margin的区别

时间：2015-06-05 11:14:00 　来源：免费模板网　作者：风雪　阅读次数　tagscss兼容

我们在控制网站布局的时候经常会用到边距，有时候不清楚用margin还有padding那么这2个有什么区别呢

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>

我们以DIV为一个盒子为例，既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"
好滴！盒子模型的四要素就出来了分别是：content(内容)、border(边框)、
padding(内边距)、margin(外边距)，如下图
我们的页面就是由许许多多的盒子组成的哟~~~，但是和现实生活中的盒子我们会忽
略外边距(margin)，但是在页面中，我们是不能忽略外边距(margin)的，只有包括外边距
的盒子模型在CSS 中才是完整的，即使外边距为零，我们也不要忽略它，要知道他是存在的