HTML基础4 ：页面布局

一、全部的 HTML 元素本质上是小的矩形块，表明着某一小块区域。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离。

元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。若是你将一个元素的 margin 设置为负值，元素将会变大。

二、有时你想要自定义元素，使它的每个边具备不一样的 padding。

CSS 容许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding。也能够按顺时针方向统一缩写，实现一样的效果。

<style>
  .red-box {
    background-color: red;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }
  .green-box{
    padding:40px 20px 20px 40px
  }

</style>

三、有时你想要自定义元素，使它的每个边具备不一样的 margin。

CSS 容许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。也能够按顺时针方向统一缩写，实现一样的效果。

<style>
   .red-box {
    background-color: red;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
  }
  .green-box {
    background-color: green;
    margin:40px 20px 20px 40px
  }
</sytle>