一、内外边距
内边距（padding）：
指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：
padding-top
padding-right
padding-bottom
padding-left
来设置四个方向的内边距
总结：
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定。
使用padding可以同时设置四个边框的样式，规则和border-width一致
例如：
<style> .box1 { width: 100px; height: 100px; background-color: #bfa; border: 10px solid red; padding: 40px;/* padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; */ } /*创建一个子元素box2占满box1，box2把内容区撑满了*/ .box2 { width: 100%; height: 100%; background-color: yellow; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body>
效果展示：
外边距：
外边距指的是当前盒子与其他盒子之间的距离，
他不会影响可见框的大小，而是会影响到盒子的位置。
<style> .box1 { width: 200px; height: 200px; background-color: #bfa; border: 10px solid red; padding: 40px; margin:50px; } .box2 { width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </html> </body>
效果展示：
盒子有四个方向的外边距：（边演示，边总结）
margin-top
上外边距，设置一个正值，元素会向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距，设置一个正值，其下边的元素会向下移动，挤别人
margin-left
左外边剧，设置一个正值，元素会向右移动
由于页面中的元素都是靠左靠上摆放的，
所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置（挤别人）
外边距也可以指定为一个负值，
例如：
.box2 { width: 200px; height: 200px; background-color: yellow; margin-top: -100px; }
如果外边距设置的是负值，则元素会向反方向移动
外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
规则和padding一样。
