一喊崖、背景介紹
margin和padding是盒子模型的兩個(gè)重要概念，這兩個(gè)屬性在進(jìn)行頁面布局的時(shí)候有很重要的作用雇逞。要理解padding 和 margin 荤懂，首先要從盒子模型開始。
盒子模型由塊級元素構(gòu)成塘砸，也可以說成一個(gè) block 元素是一個(gè)盒子节仿。一個(gè)盒子模型有五個(gè)屬性：width、height掉蔬、padding廊宪、border、margin女轿。
組成盒子模型的塊級元素由content(內(nèi)容),padding(內(nèi)邊距), border(邊框), margin(外邊距)四個(gè)部分組成箭启。?其中padding 是內(nèi)邊距，就是內(nèi)容content 與邊框之間的距離蛉迹。padding與內(nèi)容包含在border內(nèi)傅寡，padding有和內(nèi)容區(qū)相同的背景是色? margin 是外邊距，是邊框border與其他元素間的距離北救，margin沒有背景色荐操，是透明的。
如下圖所示珍策，padding和margin 和盒子模型的關(guān)系托启。
二、知識剖析
語法結(jié)構(gòu)
1攘宙、padding和margin的語法結(jié)構(gòu)是一樣的
（1）padding（margin）-left:10px; 左內(nèi)邊距
（2）padding（margin）-right:10px; 右內(nèi)邊距
（3）padding（margin）-top:10px; 上內(nèi)邊距
（4）padding（margin）-bottom:10px; 下內(nèi)邊距
（5）padding（margin）：10px; 四邊統(tǒng)一內(nèi)邊距
（6）padding（margin）:10px 20px; 上下屯耸、左右內(nèi)邊距
（7）padding（margin）:10px 20px 30px; 上、左右模聋、下內(nèi)邊距
（8）padding（margin）:10px 20px 30px 40px; 上肩民、右、下链方、左內(nèi)邊距
padding和margin屬性值是按順時(shí)針方向設(shè)置的持痰，如上圖由top開始順時(shí)針到right ---bottom---left 。
2祟蚀、可以取的值
（1）length? 規(guī)定具體單位記的內(nèi)邊距長度
（2） %? ? ? 基于父元素的寬度的內(nèi)邊距的長度
（3）auto????瀏覽器計(jì)算內(nèi)邊距
（4）inherit 規(guī)定應(yīng)該從父元素繼承內(nèi)邊距
3工窍、瀏覽器兼容問題
（1）所有瀏覽器都支持padding屬性
（2）任何版本IE都不支持屬性值“inherit”
三割卖、常見問題
1、在標(biāo)準(zhǔn)流中患雏，margin會出現(xiàn)垂直外邊距合并的情況鹏溯，也就是俗稱外邊距塌陷。在非標(biāo)準(zhǔn)流中就不會出現(xiàn)這種情況淹仑。margin上下外邊距合并的情況一般只發(fā)生在普通文檔流中丙挽，margin外邊距應(yīng)用于文本段落的上下排列可以使段落上下間距一致，不然就會出現(xiàn)雙倍外邊距的現(xiàn)象匀借，可能是因?yàn)檫@個(gè)意義颜阐，使得一些瀏覽器默認(rèn)在標(biāo)注流中合并垂直外邊距。常規(guī)流向中兩個(gè)或多個(gè)塊框相鄰的垂直邊距重合的結(jié)果是邊距寬度取相鄰邊距寬度中較大的值吓肋。如果出現(xiàn)負(fù)邊距凳怨，則在最大的正邊距中減去絕對值最大的負(fù)邊距。如果沒有正邊距是鬼，則從零中減去絕對值最大的負(fù)邊距肤舞。 浮動元素和其它元素之間的垂直邊距不重合，絕對定位的框”與“相對定位的框”邊距不重合均蜜，inline與inline-block元素也不會重合李剖。
2、如果父級元素沒有邊框border兆龙，則子容器的margin是相對于標(biāo)注流body產(chǎn)生的杖爽，父級容器會跟著子容器掉下來。也就是說紫皇，本來給子容器設(shè)置的margin 會傳遞到父元素上慰安。
如上圖所示，父元素沒有設(shè)置邊框聪铺，子元素有50px的外邊距化焕，父元素也跟著下來了。也就是說外邊距margin是間隔border與border之間的間距铃剔。
3撒桨、padding和margin的百分比是相對于父元素而言的。而應(yīng)用這個(gè)屬性键兜，可以在固定比例布局中使用百分比的padding凤类，就可以實(shí)現(xiàn)等比例縮放，這對于自適應(yīng)布局很有效果普气。
4谜疤、margin有負(fù)值，基于這個(gè)屬性可以做出很多有意思的布局效果，比較有名的就是“雙飛翼布局”夷磕，布局三個(gè)浮動的元素履肃，使用負(fù)值margin將被擠下去的元素拉回到原來的位置。
4坐桩、margin的負(fù)值還有很多特點(diǎn)：margin負(fù)值會與其他元素重疊尺棋，當(dāng)兩個(gè)block元素重疊時(shí)，后面元素可以覆蓋前面元素的背景绵跷，但無法覆蓋其內(nèi)容膘螟。當(dāng)兩個(gè)inline元素，或兩個(gè)line-block元素碾局，或inline與inline-block元素重疊時(shí)萍鲸，后面元素可以覆蓋前面元素的背景和內(nèi)容。當(dāng)inline元素(或inline-block元素)與block元素重疊時(shí)擦俐，inline元素(或inline-block元素)覆蓋block元素的背景，而內(nèi)容的話握侧， 后面的元素覆蓋前面的元素蚯瞧。
參考文獻(xiàn)
http://leepiao.blog.163.com/blog/static/485031302010427113653
http://www.hujuntao.com/web/css/css-margin-overlap.html
http://www.reibang.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
