css盒子模型margin padding

一、padding和margin定义

padding：内容到边框的距离。
margin：边框到父元素或者相邻元素的距离

<div class="padding">
padding
</div>

.padding{
    padding: 50px;
    width: 400px;
    height: 400px;
    background-color: red;
    border: 5px solid black;
    margin: 50px
  }

 

padding内边框
padding内边距用于控制content与border之间的距离，同时设置上下左右的padding时，可以这样写padding:10px 20px 10px 10px;分别对应上、右、下、左四个方向的padding，逆时针排序，margin属性也可以这样书写。
同时它也可以用*（padding-left右内边距 padding-right 左内边距 padding-top 上内边距 padding-bottom下内边距）*四个属性可以设置单一的也可以设置重叠的padding属性。

margin外边距
margin外边距用于控制块与块（可以理解成块级元素）之间的距离。为了便于理解可以把盒子模型想象成一幅画，content是画本身，padding是画与画框的留白，border是画框，margin是画与画之间距离。（margin-left右内边距 margin-right 左内边距 margin-top 上内边距 margin-bottom下内边距）*四个属性可以设置单一的也可以设置重叠的margin属性
需要注意的是IE和firefox在处理margin时有一些差别，倘若设定了父元素的高度height值，如果此时子元素的高度超过了父元素的height值，二则显示结果完全不同，IE浏览器会自动扩大，而firefox（火狐浏览器）就不会，这一点是需要注意的。

padding和margin两者之间的区别
我们以DIV为一个盒子为例，既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"