外边距、内边距、box-sizing

外边距

margin，同时设置四个外边距

margin-top，设置上外边距

margin-bottom，设置下外边距

margin-left，设置左外边距

margin-right设置右外边距

取值：

1. px(margin:20px)，

2. %(margin:2%)，

3. auto(只对左右有效，上下无效，处理块级元素的居中问题，margin:10px auto)

4. 负值(移动元素，margin-left:-10px，左移动；margin-top:-10px，向上移动)

注意：外边距是不能被继承的

特殊问题：

1、外边距合并：当两个垂直外边距相遇时，它们将合并成一个外边距，合并后的外边距的高度等于两个外边距中高度较大的一个，而不是相加

2、外边距溢出：在某些特殊情况下，为子元素设置上下外边距时，可能会作用到父元素上

特殊情况：1 .父元素没有上或下边框

2.必须为第一个或是最后一个子元素设置外边距时

解决方法：1.给父元素增加一个透明的上边框

2.在父元素里再增加一个子元素<table></table>到第一个子元素的位置

3.用父元素的上内边距来取代子元素的上外边距(比较提倡的做法)

4.给父元素添加overflow:hidden

5.用:before完成（最提倡的做法）

div:before{

content:’’;

display:table

}

3. 为行内元素设置上下外边距无效，可以加左右外边距

4. 为行内块设置上下外边距，整行内容都跟着变

内边距

padding，

padding-top，

padding-bottom，

padding-left，

padding-right

取值：1.px(padding:10px)

2.%(padding:5%)

注意：为行内元素和行内块元素设置内边距时，只会影响到自己，不影响其他元素（不会撑起其他元素）

box-sizing

重新指定元素框模型的计算模式

取值：content-box，默认值，border和padding会在width和height基础上额外计算

border-box，border和padding会计算在width和height之内