本文已参与「新人创作礼」活动，一起开启掘金创作之路
三、内外边距
内边距（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一样。
\
