昨天我們完成了按鈕的互動設計，今天要解決另一個 UI 常見問題：
「為什麼東西沒要按照預想到預期的位置？」

答案就在 元素的邊界與空間。
沒有進行良好的推擠時，很有可能會讓使用者縮放網頁大小時，產生破版效果

1. 什麼是元素的「邊界」？

HTML 元素可以想像成「一個盒子（box）」，這是 CSS 盒模型（Box Model） 的核心概念，其中會影響到 HTML 元素的空間要素，從外至內包含：margin、border、padding 及元素主要內容：

content：內容本身（文字、圖片）
padding：內距---內容與邊框的內部距離
border：元素邊框
margin：外距---元素與外界的距離
注意實虛線的差別ᕕ ( ᐛ ) ᕗ

Box Model 中的要素，會影響到整個元素的大小，舉例來說：有一個 font-size 為 30px 的 h1 標籤，目前上下各有 25px 的 padding，請問現在 h1 的高度是 30px 還是 80px 呢？

我相信你應該知道答案是後者了

HTML

<button class="btn">按鈕</button>

CSS

.btn {
  background-color: #007bff;
  color: white;
  font-size: 16px;
  padding: 10px 20px;   /* 內距*/
  margin: 10px;         /* 外距：與其他元素保持距離 */
  border: 2px solid #0056b3; /* 邊框 */
  border-radius: 8px;
}

3. margin vs padding 的差別？

• margin（外距）
  控制 按鈕與其他元素 的距離，像「按鈕外的空白區」

• padding（內距）
  控制 按鈕內文字與邊框 的距離，像「按鈕裡的透明空間」

範例：

.btn {
  margin: 20px;     /* 按鈕與其他元素距離 */
  padding: 5px 30px;/* 按鈕內容左右按鈕更寬鬆 */
}

4. border（邊框）

邊框會影響元素的「實際大小」：

.btn {
  border: 3px solid red; /* 粗紅框 */
}

舉例：當width: 100px 時，加上 border: 3px，實際寬度會是 100px + 左右邊框(共 6px)=106px

5. gap（彈性排版的間距好幫手）

當用 flex 或 grid 排版時，常用 gap 控制「項目間距」，避免用多餘的 margin
範例：

.container {
  display: flex;
  gap: 20px; /* 子項目間距 */
}

<button class="btn">A</button>
<button class="btn">B</button>
<button class="btn">C</button>

display: flex → 讓按鈕自動排成一排

學習心得

做的時候可以嘗試看看，把 padding: 0;，或者其他數值，這樣會發生什麼事？
又或者把 gap 拿掉，會發生什麼事？意外的好玩，雖然如果位置一直不對會很生氣，但也因為這樣，才能一步一步理解版面配置的邏輯。當自己慢慢能控制元素的位置時，就會有成就感產生~