margin padding图文详解

一、外边距——margin

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。单边外边距属性

上外边距：margin-top
右外边距：margin-right
下外边距：margin-bottom
左外边距：margin-left

外边距塌陷（改变）
overflow:hidden;

二、内边距——padding

元素的内边距在边框和内容区之间。
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
单边内边距属性

上外边距：padding-top
右外边距：padding-right
下外边距：padding-bottom
左外边距：padding-left

box-sizing: border-box;

三、margin和padding的简写属性

(四个值)
margin: top right bottom left;
padding: top right bottom left;

(三个值)
margin: 上 左右 下
padding:上 左右 下

margin: 10px 20px 30px; 相当于：
margin: 10px 20px 30px 20px;

(两个值)
margin: 上下 左右
padding:上下 左右

margin: 10px 30px; 相当于：
margin: 10px 30px 10px 30px;

(一个值)
margin: 四边值是一样的

margin: 10px; 相当于：
margin: 10px 10px 10px 10px;

四、盒模型

所有HTML元素可以看作盒子
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

box-sizing：content-box；
盒子大小为width+padding+border
content-box：此值为默认值

box-sizing：border-box；
盒子大小为width(padding和border是包含到width里面的)
注： content的值是会自动调整的。