代码介绍
      
    

.main-header {
  background-color: #f7f7f7;
  padding: 20px;
}

如上，当我们添加了外边距之后，外部都得到一些空间

当然我们也可以在盒子的一个位置上添加padding

  padding-left: 40px;
  padding-right: 40px;

当然上述的代码我们还可以写的更加简便点

padding: 20px 40px; #第一个值代表底部和顶部，第二个值代表左部和右部

margin

• 例如下图，列表太挤了，我们想每个列表之间有点空隙，这样看起来更好看‘

li {
  font-size: 20px;
  margin-bottom: 10px;
}

• 但是我们并不想最后一个元素也存在一个margin来调整列表之间的位置

li:last-child {
  margin-bottom: 0;
}

• 如下图所示，每个元素都有自己默认的边距和位置，让我们很难去控制全局的边距，故在写CSS之前，我们通常会重置页面的边距，我们通常会使用通用选择器去做（边距不可被继承）

* {
  margin: 0;
  padding: 0;
}

接着去修改我们的边距和位置

• 如上图所示，在相关文章处，分割线和文字太紧了，我们去调整一下

aside {
  background-color: #f7f7f7;
  border-top: 5px solid #1098ad;
  border-bottom: 5px solid #1098ad;
  padding: 50px 0px ;  #上下位置50px，左右0px
}

其他的同理，让我们通过边距和位置来调整到下图一样吧