容器盒子模型 (Box Model )

網頁中所有的元素所產生的容器，都會透過一套標準的「盒子模型 Box Model」來定義容器的「長寬、內邊距、邊框和外邊界」，盒子模型也是網頁排版最基礎也必備的 CSS 知識，這篇教學會介紹什麼是盒子模型、盒子模型的水平對齊和垂直對齊行為。

快速導覽：

• 認識盒子模型 (Box Model )
• 盒子模型的水平對齊
• 盒子模型的垂直對齊

認識盒子模型 (Box Model )

容器的盒子模型的構造如下圖所示，從內而外分成：「內容、內邊距、邊框、外邊界」四層。

盒子模型的水平對齊

當元素本身是「行內容器」類型特性時 ( inline、inline-* )，可以進行「水平對齊」，對齊時會使用盒子模型的「外邊界」作為左右對齊的依據。

下方的範例將兩個 div 改成 display:inline;，並分別設定 margin 為 50px 和 25px 並進行靠左對齊。

線上展示：https://codepen.io/oxxo/pen/mdYKXZa

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <br/>
  <div>oxxo</div>
  <br/>
  <div class="a">apple</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main{
    text-align: left;   /* inline 顯示類型的子元素靠左對齊 */
    font-size: 20px;
  }
  span {background: orange;}
  div {
    display: inline;      /* 將 div 換成 inline 類型 */
    background: pink;
    padding: 20px;
    margin: 50px;
    border: 10px solid #000;
    line-height: 100px;  /* 設定行高避免重疊 */
  }
  .a {
    background:cyan;
    padding: 10px;
    margin: 25px;
    line-height: 100px;  /* 設定行高避免重疊 */
  }
</style>

進行「水平置中」時，會先計算容器的總寬度，接著透過「總寬度 / 2」計算出中心點的位置進行垂直對齊，而總寬度的計算與 box-sizing 的屬性值有關，下方列出不同屬性值下總寬度的算法：

inline 顯示類型元素無法調整寬高，inline-* 顯示類型元素才能調整寬高。

下方的範例可以很明顯地看出，兩個 div 因為左右 margin 和 padding 數值不同，所以在水平置中對齊時，就會發生偏向左邊或右邊的狀況。

線上展示：https://codepen.io/oxxo/pen/yLWEvmJ

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <br/>
  <div>oxxo</div>
  <br/>
  <div class="a">apple</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main{
    text-align: center;      /* inline 的子元素水平置中 */
    font-size: 20px;
  }
  span {
    background: orange;      /* 將 div 換成 inline 類型 */
  }
  div {
    display: inline;
    background: pink;
    padding: 20px 20px 0 0;  /* 設定上右內邊距為 20px，下左內邊距為 0 */
    margin: 0 50px 0 0;      /* 設定右外邊界為 50px，上下左外邊界為 0 */
    border: 10px solid #000;
    line-height: 100px;
  }
  .a {
    background:cyan;
    padding: 10px 0 0 10px;  /* 設定上左內邊距為 10px，下右內邊距為 0 */
    margin: 0 0 0 25px;      /* 設定左外邊界為 50px，上下右外邊界為 0 */
    line-height: 50px;
  }
</style>

盒子模型的垂直對齊

當元素本身是「行內或表格容器」類型特性時 ( inline、inline-*、table、table-* )，可以進行「垂直對齊」，對齊時會使用盒子模型的「外邊界」作為垂直對齊的依據。

下方的範例將兩個 div 改成 display:inline-block;，並分別用 margin 設定下邊界為 20px 和 50px 並進行垂直對齊，垂直對齊使用預設值 baseline，過程中在內容加入一個 display 為 block 的 div 凸顯內容大小。

線上展示：https://codepen.io/oxxo/pen/mdYKXNa

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <div><div></div> </div>
  <div class="a"><div></div> </div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {font-size: 20px;}
  span {
    background: orange;
  }
  div {
    display: inline-block;  /* 將 div 的顯示類型改成 inline-block */
    background: pink;
    width: 50px;
    height: 50px;
    padding: 20px;
    margin: 0  0 20px 0;   /* 下外邊界為 20px，上左右外邊界為 0 */
    border: 10px solid #000;
  }
  .a {
    background:cyan;
    margin: 0 0 50px 0;   /* 下外邊界為 50px，上左右外邊界為 0 */
  }
  div div{
    display: block;        /* 內容 div 的顯示類型為 block */
    width: 50px;
    height: 50px;
    padding: 0;           /* 內邊距為 0 */
    margin: 0;            /* 外邊界為 0 */
    border: none;         /* 邊框為 0 */
    background: yellow;
  }
</style>

進行「垂直置中」時，會先計算容器的總高度，接著透過「總高度 / 2」計算出中心點的位置進行垂直對齊，而總高度的計算與 box-sizing 的屬性值有關，下方列出不同屬性值下總高度的算法：

inline 顯示類型元素無法調整寬高，inline-* 顯示類型元素才能調整寬高。

下方的範例可以很明顯地看出，兩個 div 因為上下 margin 和 padding 數值不同，所以在垂直置中對齊時，就會發生偏向上面或下面的狀況。

線上展示：https://codepen.io/oxxo/pen/MWdXVgj

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <div><div></div></div>
  <div class="a"><div></div></div>
  <div class="b"><div></div></div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {font-size: 20px;}
  main * {vertical-align: middle;}  /* main 裡的所有元素都垂直置中對齊 */
  span {background: orange;}
  div {
    display: inline-block;     /* div 的顯示類型為 inline-block */
    background: pink;
    width: 20px;
    height: 50px;
    padding: 20px;
    margin: 0  0 100px 0;      /* 下外邊界為 100px，上左右外邊界為 0 */
    border: 10px solid #000;
  }
  .a {
    background:cyan;
    padding: 10px 20px 0 20px; /* 上內邊距為 10px，左右內邊距為 20px，下內邊距為 0 */
    margin: 50px 0 0 0;        /* 上外邊界為 50px，下左右外邊界為 0 */
  }
  .b {
    background: #0f0;
    margin: 50px 0;            /* 上下外邊界為 50px，左右外邊界為 0 */
  }
  div div{
    display:block;             /* div 裡的 div 的顯示類型為 block */
    width: 20px;
    height: 50px;
    padding: 0;                /* 內邊距為 0 */
    margin: 0;                 /* 外邊界為 0 */
    border: none;              /* 邊框為 0 */
    background: yellow;
  }
</style>

不過垂直置中會有一些特殊狀況，當垂直置中的元素內容包含「inline」顯示類型元素，垂直對齊的「baseline、super、sub」的參考線，就會根據 inline 的參考線進行垂直對齊 ( 參考「vertical-align 垂直對齊」)。

注意，只要出現「文字」，就會自動產生 inline 行內容器。

下方的範例在空白的 div 內容時，會使用 inline-block 的對齊方式對齊 baseline，但當文字出現在 div 裡時，垂直對齊的行為就變成對齊文字的 baseline。

線上展示：https://codepen.io/oxxo/pen/mdYKxbv

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <div><div></div></div>
  <div><div>oxxo</div></div>            <!-- 出現文字 -->
  <div class="a"><div></div></div>
  <div class="a"><div>oxxo</div></div>  <!-- 出現文字 -->
</main>

<!-- CSS 程式碼 -->
<style>
  main {font-size: 20px;}
  main * {vertical-align: baseline;}  /* main 裡的所有元素都垂直置中對齊 */
  span {background: orange;}
  div {
    display: inline-block;    /* div 的顯示類型為 inline-block */
    background: pink;
    width: max-content;       /* 讓最大的內容撐滿寬度 */
    height: 100px;
    padding: 20px;
    margin: 0  0 50px 0;      /* 下外邊界為 50px，上左右外邊界為 0 */
    border: 10px solid #000;
  }
  .a {
    background:cyan;
    padding: 10px 20px 0 20px; /* 上內邊距為 10px，左右內邊距為 20px，下內邊距為 0 */
    margin: 50px 0 0 0;        /* 上外邊界為 50px，下左右外邊界為 0 */
  }
  div div{
    display:block;             /* div 裡的 div 的顯示類型為 block */
    background: yellow;
    padding: 0;                /* 內邊距為 0 */
    margin: 0;                 /* 外邊界為 0 */
    border: none;              /* 邊框為 0 */
  }
</style>

小結

容器盒子模型 ( box Model ) 是 CSS 最重要的觀念之一，幾乎所有的排版和對齊都圍繞在盒子模型的觀念上打轉，透過這篇教學，相信能夠深入理解容器盒子模型的運作原理。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～