一、背景介绍
margin和padding是盒子模型的两个重要概念，这两个属性在进行页面布局的时候有很重要的作用。要理解padding 和 margin ，首先要从盒子模型开始。
盒子模型由块级元素构成，也可以说成一个 block 元素是一个盒子。一个盒子模型有五个属性：width、height、padding、border、margin。
组成盒子模型的块级元素由content(内容),padding(内边距), border(边框), margin(外边距)四个部分组成。 其中padding 是内边距，就是内容content 与边框之间的距离。padding与内容包含在border内，padding有和内容区相同的背景是色 margin 是外边距，是边框border与其他元素间的距离，margin没有背景色，是透明的。
如下图所示，padding和margin 和盒子模型的关系。
二、知识剖析
语法结构
1、padding和margin的语法结构是一样的
（1）padding（margin）-left:10px; 左内边距
（2）padding（margin）-right:10px; 右内边距
（3）padding（margin）-top:10px; 上内边距
（4）padding（margin）-bottom:10px; 下内边距
（5）padding（margin）：10px; 四边统一内边距
（6）padding（margin）:10px 20px; 上下、左右内边距
（7）padding（margin）:10px 20px 30px; 上、左右、下内边距
（8）padding（margin）:10px 20px 30px 40px; 上、右、下、左内边距
padding和margin属性值是按顺时针方向设置的，如上图由top开始顺时针到right ---bottom---left 。
2、可以取的值
（1）length 规定具体单位记的内边距长度
（2） % 基于父元素的宽度的内边距的长度
（3）auto 浏览器计算内边距
（4）inherit 规定应该从父元素继承内边距
3、浏览器兼容问题
（1）所有浏览器都支持padding属性
（2）任何版本IE都不支持属性值“inherit”
三、常见问题
1、在标准流中，margin会出现垂直外边距合并的情况，也就是俗称外边距塌陷。在非标准流中就不会出现这种情况。margin上下外边距合并的情况一般只发生在普通文档流中，margin外边距应用于文本段落的上下排列可以使段落上下间距一致，不然就会出现双倍外边距的现象，可能是因为这个意义，使得一些浏览器默认在标注流中合并垂直外边距。常规流向中两个或多个块框相邻的垂直边距重合的结果是边距宽度取相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。 浮动元素和其它元素之间的垂直边距不重合，绝对定位的框”与“相对定位的框”边距不重合，inline与inline-block元素也不会重合。
2、如果父级元素没有边框border，则子容器的margin是相对于标注流body产生的，父级容器会跟着子容器掉下来。也就是说，本来给子容器设置的margin 会传递到父元素上。
如上图所示，父元素没有设置边框，子元素有50px的外边距，父元素也跟着下来了。也就是说外边距margin是间隔border与border之间的间距。
3、padding和margin的百分比是相对于父元素而言的。而应用这个属性，可以在固定比例布局中使用百分比的padding，就可以实现等比例缩放，这对于自适应布局很有效果。
4、margin有负值，基于这个属性可以做出很多有意思的布局效果，比较有名的就是“双飞翼布局”，布局三个浮动的元素，使用负值margin将被挤下去的元素拉回到原来的位置。
4、margin的负值还有很多特点：margin负值会与其他元素重叠，当两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容。当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容。当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素。
参考文献
http://leepiao.blog.163.com/blog/static/485031302010427113653
http://www.hujuntao.com/web/css/css-margin-overlap.html
http://www.jianshu.com/p/549aaa5fabaa
http://www.cnblogs.com/smyhvae/p/7256371.html
http://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout
http://www.cnblogs.com/xiaohuochai/p/5314289.html
http://blog.sina.com.cn/s/blog_601b97ee0101b8xe.html
网友评论