首頁 > 開發者 > JavaScript
padding和margin——內邊距和外邊距，paddingmargin外邊
一、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拉開距離。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
