一、padding——內邊距（內填充）
1.1、padding 簡寫屬性在一個聲明中設置所有填充屬性。該屬性可以有1到4個值。
<style> div.outer{ width: 400px; height: 400px; border: 2px solid #000; } div.inner{ width: 200px; height: 200px; background-color:red ; padding: 50px; } </style> <body> <div class="outer"> <div class="inner"></div> </div> </body>
運行效果圖： 
1.2、padding 屬性也可以按照方向分開來寫。
<style> .outer { width:400px; height:400px; border: 2px solid #000; } .inner { width:200px; height:200px; background-color:green; /*padding:40px 80px;運行效果是一樣的*/ padding-top:40px; padding-right: 80px; padding-bottom: 40px; padding-left: 80px; } </style> <body> <div class="outer"> <div class="inner"></div> </div> </body>
運行效果圖：
1.3、padding屬性值可以有四種形式：
二、margin——外邊距
2.1、margin簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有1到4個值。
<style> div.outer{ width: 400px; height: 400px; border: 2px solid #000; } div.inner{ width: 200px; height: 200px; background-color:green ; margin: 50px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body>
代碼運行效果如下圖:
2.2、margin屬性也可以按照方向分開來寫。
<style> div.outer{ width: 400px; height: 400px; border: 2px solid #000; } div.inner{ width: 200px; height: 200px; background-color:green ; /*margin:40px 80px 20px 40px;運行效果是一樣的*/ margin-top:40px; margin-right: 80px; margin-bottom: 20px; margin-left: 80px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body>
代碼運行效果如下圖:
2.3、margin屬性值可以有四種形式：
三、內邊距和外邊距的區別
1、margin和padding都是盒模型(Box Model)的重要元素，二者都是用來處理與其他盒子的距離關系進行布局的。
2、形象的介紹，夏季女生在地鐵遇到色狼變態時有發生，如果選擇穿上羽絨服與色狼保持距離，那就是padding內邊距，如果選擇移動自己的位置遠離色狼，那就是margin外邊距。
3、就與borde邊框的位置來看，pading在border邊框內，margin在border邊框外。
4、padding內邊距會改變盒模型的大小（即寬高），margin則不會。
5、margin內邊距用負值，pading不可以。
<style> .box{float:left;border:10px solid #000;margin:20px;} .box div{width:100px;height:100px;background:red;} .div1{margin-top:-30px;} .div2{margin-left:-30px;} .div3{margin-bottom:-30px;} .div4{margin-right:-30px;} </style> <body> <div class="box"> <div class="div1"></div> </div> <div class="box"> <div class="div2"></div> </div> <div class="box"> <div class="div3"></div> </div> <div class="box"> <div class="div4"></div> </div> </body>
代碼運行效果圖如下：
6、背景圖片會顯示在padding內邊距上，不會顯示在margin外邊距上。
<style> .box{ width:320px; border: 10px solid #000000; } div{ width: 200px; height: 200px; margin: 40px; padding: 20px; border: 1px solid red; background: url(img/2mail.jpg) no-repeat; } </style> <body class="box"> <div class="box"> <div> <img src="img/love.jpg" alt="" /> </div> </div> </body>
代碼運行效果圖如下：
四、兼容
4.1、IE瀏覽器不支持padding內邊距和margin外邊距的“inherit”繼承屬性值。
4.2、外邊距合並
4.2.1、當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合並為最大的數值，請看下圖：
解決方法:把全部的外邊距給上面元素的下外邊距或者下面元素的上外邊距。
外邊距合並的意義：
4.2.2、當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合並。請看下圖：
解決方法: 1、給父集加overflow: hidden；2、border或者padding；3、不使用margin,用padding拉開距離。
