Box Sizing Margin Padding(內容盒子與邊框盒子與內外距) | CSS

CSS 內容盒子與邊框盒子、外邊距和內邊距！這些基本屬性影響了你網頁中元素的大小、間距和位置。

box-sizing 詳細介紹

盒子模型大小 (Box-Sizing):

CSS 盒子模型大小會影響瀏覽器如何計算元素的總大小，考慮內容和內邊距。預設為 content-box ，其中內邊距和邊框會新增到指定的寬度中。選擇 border-box 可確保內邊距和邊框包含在指定的寬度內。大多數前端工程會使用 border-box ，這樣在切版時比較不會有超出我們預期的大小。

外邊距 (Margin):

外邊距在元素周圍創造空間，與其他元素保持分離。這對於控制整體佈局並防止元素感覺擁擠至關重要。

內邊距 (Padding):

另一方面，內邊距在元素內部內容和邊框之間創建空間。這有助於保持內部間距，並增強元素的視覺吸引力。

透過掌握這些屬性，你能夠精確控制元素在網頁上的互動和關聯。網頁設計時， 留白 真的是一門藝術，要留白多少真的是門學問，前端工程師們在開發時，間距和留白關乎整體畫面比例的美感，因為在開發時也需要和你的設計師密切溝通

See the Pen Box Sizing Margin Padding(內容盒子與邊框盒子與內外距)-CSS by lenrich (@lenrich) on CodePen.

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS盒模型和margin/padding</title>
    <style>
      /* 清空瀏覽器默認樣式 CSS樣式重置 */
      * {
        margin: 0;
        padding: 0;
        /* IE盒模型 */
        /* 固定盒子的大小不要被padding影響 */
        box-sizing: border-box;
      }
      .box {
        background: #f4f4f4;
        border: 2px #777 solid;
        width: 500px;
        /* 設定所有padding */
        /* 標準盒模型中，增加padding時，會撐大盒子的大小 */
        /* padding: 120px; */
        padding: 20px;
        /* 設置padding單邊 */
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
        /* 簡寫方式 順時針 上 右 下 左 */
        padding: 10px 20px 10px 20px;

        /* 簡寫方式(對稱值相等) 順時針 (上下)(左右) */
        padding: 10px 20px;

        /* 設定所有margin */
        /* 標準盒模型中，增加margin時，會撐大盒子的大小 */
        /* margin: 120px; */
        margin: 20px;
        /* 設置margin單邊 */
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 10px;
        margin-left: 20px;
        /* 簡寫方式 順時針 上 又 下 左 */
        margin: 10px 20px 10px 20px;

        /* 簡寫方式(對稱值相等) 順時*/
        margin: 10px 20px;
      }

      .box h3 {
        padding-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h3>Box 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deserunt
        voluptatum necessitatibus minima eaque asperiores accusamus, vel sequi
        quas mollitia.
      </p>
    </div>

    <div class="box">
      <h3>Box 2</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deserunt
        voluptatum necessitatibus minima eaque asperiores accusamus, vel sequi
        quas mollitia.
      </p>
    </div>
  </body>
</html>