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>