基本CSS：調整元素的填充-邊框

三個重要的屬性控制圍繞每個HTML元素的空間：padding，border，和margin。

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 10px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

padding

padding：是內邊距大小

blue-box padding 10px:

blue-box padding 20px:

padding有4個單獨設置的屬性：padding-top，padding-right，padding-bottom，和padding-left

• padding-top：內邊框上填充
• padding-right：內邊框右側填充
• padding-bottom：內邊框到底部的填充
• padding-left：內邊框到左側的填充

除了指定一個元素的padding-top，padding-right，padding-bottom，和padding-left單獨的屬性，你可以在一行中指定他們，就像這樣：

padding: 10px 20px 10px 20px;

這四個值像一個時鍾一樣工作：上，右，下，左，並且將產生與使用特定於邊的填充指令完全相同的結果。

margin

margin 是外邊距的大小
blue-box margin：10px

blue-box margin：20px

margin 可以設置負數，當設置負數時，將水平充滿這個邊框周圍。

margin有4個單獨設置的屬性：margin-top，margin-right，margin-bottom，和margin-left

• margin-top：到邊框頂部的邊距
• margin-right：到邊框右側的邊距
• margin-bottom：到邊框底部的邊距
• margin-left：到邊框左側的邊距

除了指定一個元素的margin-top，margin-right，margin-bottom，和margin-left單獨的屬性，你可以在一行中指定他們，就像這樣：

margin: 10px 20px 10px 20px;

這四個值像時鍾一樣工作：上，右，下，左，並且將產生與使用特定於邊的邊距指令完全相同的結果。