padding是内边距,会影响我们在浏览器中看到的元素的实际大小,内边距会让元素的内容增大，和其他元素没有关系!
margin是外边距,不会影响我们在浏览器中看到的元素的实际大小,外边距不会让元素的内容增大，是和另一个元素的间距!
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /*盒子的实际宽高大小是多少?*/ 8 .content{ 9 width: 100px; 10 height: 250xp; 11 border: 10px solid #f90; 12 border-left: 40px; 13 padding: 10px 30px; 14 margin: 10px 20px 30px; 15 } 16 /*实际宽度:100+30+10+30=170px*/ 17 /*实际高度:250+10+10+10+10=290px*/ 18 </style> 19 </head> 20 <body> 21 <div class="content"></div> 22 </body> 23 </html>
css盒子模型的计算:
- 元素的实际宽度=宽度width+padding-left/padding-right+border-left/border-right
- 元素的实际高度=高度height+padding-top/padding-bottom+border-top/border-bottom
口号:元素的实际大小只会受padding和border的影响跟margin没有关系,如果加了padding和margin值,要在width和height的值上减去padding和margin的值,否则内容会溢出