围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。单边外边距属性
上外边距：margin-top 右外边距：margin-right 下外边距：margin-bottom 左外边距：margin-left 外边距塌陷（改变） overflow:hidden;
元素的内边距在边框和内容区之间。 CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。 单边内边距属性
上外边距：padding-top 右外边距：padding-right 下外边距：padding-bottom 左外边距：padding-left
box-sizing: border-box;
(四个值) 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的值是会自动调整的。
