- 登入
- 註冊
Padding、Margin、Border 是什麼？CSS 盒模型、差別與網站間距實作
內容目錄
顯示
Padding、Margin、Border 都會影響網頁元素周圍的空間，但位置與責任不同。Padding 是內容到邊框之間的內距，Border 是可設定寬度、樣式與顏色的邊界層，Margin 是邊框之外與其他元素之間的外距。選錯不一定立刻壞掉，卻常讓按鈕點擊範圍、背景顏色、卡片寬度與手機版排列變得難以控制。
先說結論：內部用 Padding，外部用 Margin，邊界用 Border
| 屬性 | 中文概念 | 位置 | 常見用途 | 背景是否延伸 |
|---|---|---|---|---|
| Padding | 內距 | 內容與 Border 之間 | 按鈕內距與卡片內容留白 | 通常看得到元素背景 |
| Border | 邊框 | Padding 外且 Margin 內 | 輸入框、卡片與區隔線 | 邊框本身有樣式與顏色 |
| Margin | 外距 | Border 外側 | 區塊與相鄰元素分開 | 透明，不承載元素背景 |
| Gap | 項目間距 | 容器內的相鄰項目之間 | Grid 與 Flex 卡片列的統一間隔 | 由容器背景透出 |
實用的判斷法：希望空間也屬於按鈕或卡片，使用 Padding；希望兩個元件分開，先看父層能否用 Gap，再考慮 Margin；希望設定邊界層，使用 Border。
標準定義：W3C：CSS Box Model Module Level 3；教學參考：MDN：CSS box model（查證 2026-08-02）
CSS 盒模型圖：從內容向外看四層
瀏覽器會把可見元素視為盒子。以下自製圖由外到內依序是 Margin、Border、Padding、Content。四層不是裝飾名詞，而是計算大小、背景與元素間距的基礎。
Margin 外距
Content
文字、圖片、按鈕內容
文字、圖片、按鈕內容
外 → 內：Margin → Border → Padding → Content
Margin和其他盒子保持距離
Border設定盒子的邊界層
Padding讓內容不貼著邊框
Content放文字、圖片與其他內容
在一般情況下，元素背景會畫在內容與 Padding 區域，並延伸到邊框下方；實際範圍可再受 background-clip 控制。Margin 一律是透明空間，不會顯示該元素自己的背景。
Padding 是什麼？內容和邊框之間的內距
Padding 會擴大背景與可點擊區域
Padding 位在 Content 外且 Border 內。按鈕文字周圍增加 Padding，背景色與可點擊範圍通常會一起變大；卡片增加 Padding，內容就不會貼著邊框。這也是 Padding 和 Margin 在操作元件上的主要差別。
Padding 不能使用負值。若你想把元素拉近、位移或重疊，應重新檢查版面結構，或使用適合的 Margin、定位與轉換方式，不要期待負 Padding 生效。
什麼情況適合用 Padding？
- 按鈕文字到按鈕邊緣的空間。
- 卡片內容到卡片背景或邊框的空間。
- 輸入欄位文字到欄位邊界的空間。
- 有背景色的區塊，希望背景包住留白。
Margin 是什麼？元素與外界之間的外距
Margin 不會擴大元素背景或點擊範圍
Margin 位在 Border 外側，主要用來把盒子和相鄰內容分開。它會影響元素在頁面上佔用的空間關係，但不屬於元素可見的 Border box，也不會讓按鈕背景或可點擊範圍變大。
Margin 可以是正值、零、auto，也允許負值。負 Margin 可能造成重疊，適合有明確版面目的且已測過各裝置的情境，不應只用來掩蓋錯誤的父層尺寸。
margin: 0 auto 為什麼能置中？
對一般排版中的 block 元素，當使用寬度小於包含塊且左右仍有剩餘空間時，把左右 Margin 設成 auto，瀏覽器可將可用水平空間分配到兩側，形成水平置中。它不是通用的垂直置中指令；Flex 與 Grid 版面通常有更直接的對齊屬性。
Border 是什麼？Padding 與 Margin 中間的邊界
Border 包住 Content 與 Padding，可設定寬度、線條樣式與顏色。常見用途包含輸入框、卡片外框、表格格線，以及只畫某一側的分隔線。圓角由 border-radius 控制，但有圓角不代表一定要顯示實線邊框。
Border 會參與盒子尺寸計算。CSS 的 box-sizing 初始值是 content-box，這時 Padding 與 Border 會加到指定寬度外；但部分表格與表單控制項的瀏覽器預設可能是 border-box，除錯時應查看開發者工具裡的 computed value。使用 border-box 時，指定寬度會把 Content、Padding 與 Border 包在裡面。
Margin、Padding、Gap、Outline 怎麼選？
| 你想完成的事 | 優先選擇 | 理由 |
|---|---|---|
| 放大按鈕內部空間 | Padding | 背景與可點擊範圍一起擴大 |
| 卡片內容不要貼邊 | Padding | 空間屬於卡片內部 |
| 一列卡片間距一致 | Gap | 由父層統一控制，不必處理首尾 Margin |
| 單一區塊和下一段分開 | Margin | 調整該盒子與外部內容的距離 |
| 畫出輸入框或卡片邊界 | Border | 邊界可設定線寬、樣式與顏色 |
| 顯示鍵盤焦點且不改變尺寸 | Outline | Outline 不參與盒模型尺寸，不可只因裝飾需求而隱藏 |
| 只要視覺陰影 | Box shadow | 繪製效果不取代實際間距 |
gap 適用於 Grid、Flex 與多欄容器的項目間距。它不會在容器首尾額外產生一圈外距，做重複卡片與導覽項目時通常比每張卡片分別加 Margin 容易維護。
技術參考：MDN：gap；MDN：outline（查證 2026-08-02）
Padding 與 Margin 四個值怎麼看？
Padding 與 Margin 的 shorthand 都能用一至四個值。記法是從上方開始，順時針依序為上、右、下、左。
| 寫法 | 套用方式 | 解讀 |
|---|---|---|
padding: 16px; | 四邊相同 | 上右下左都是 16 px |
padding: 16px 24px; | 上下／左右 | 上下 16 px，左右 24 px |
padding: 12px 24px 20px; | 上／左右／下 | 上 12 px，左右 24 px，下 20 px |
padding: 8px 16px 24px 32px; | 上／右／下／左 | 依順時針套用 |
px、rem、em、百分比怎麼選？
px 適合需要精確控制的局部尺寸；rem 依根元素字級變化，適合建立全站一致的間距尺度；em 依該元素計算後的字級變化，元件大小需要跟著文字比例調整時很有用。百分比 Padding 與 Margin 則依包含塊的 inline size 計算，在水平書寫模式通常就是包含塊寬度，不是元素自己的寬或高。
單位沒有唯一正解。先確認間距要固定，跟著全站字級，跟著元件字級，還是跟著容器改變，再選單位；若使用百分比，尤其要在不同容器寬度下測試。
單位參考：MDN：<length>；百分比參考：MDN：padding（查證 2026-08-02）
若網站需要支援不同書寫方向，可以考慮 padding-inline、padding-block、margin-inline 與 margin-block 等 logical properties。它們依文字流向表示 inline 與 block 方向，比固定寫 left 與 right 更容易跟著語言方向切換。
技術參考：MDN：Logical properties for margins, borders, and padding（查證 2026-08-02）
content-box 與 border-box：為什麼寬度會超出？
假設元素設定 width: 320px，左右 Padding 各 24 px，左右 Border 各 2 px：
content-box：320 + 24 + 24 + 2 + 2 = 372 px。指定的 320 px 只算 Content。border-box：可見 Border box 維持 320 px，Content 寬度會扣除左右 Padding 與 Border，剩 268 px。
Margin 不包含在這兩種可見盒子寬度裡，但仍會影響它與周圍內容的空間關係。很多「設定 100% 還是爆版」的問題，源自 content-box 又加上左右 Padding 或 Border。
公式與定義：MDN：box-sizing；web.dev：Box Model（查證 2026-08-02）
Margin collapsing：為什麼上下外距沒有相加？
在特定 block flow 情境中，相鄰的垂直 Margin 可能合併，而不是直接相加。兩個正 Margin 接觸時，常由較大的值成為最後間距。例如上一段 margin-bottom: 24px，下一段 margin-top: 16px，結果可能是 24 px，而不是 40 px。
Flex 與 Grid 項目之間不會用相同方式發生 Margin collapsing。若你要控制重複項目的固定節奏，優先讓父層使用 gap，通常比同時在上一個元素加 bottom Margin，下一個元素加 top Margin 更清楚。
技術參考：MDN：Mastering margin collapsing（查證 2026-08-02）
網站間距不要每次猜：先建立一組 spacing scale
同一網站若到處出現 13 px、19 px、27 px 等臨時數值，視覺節奏會不穩，之後也難以整體調整。可以先建立一組間距尺度，例如 4、8、12、16、24、32、48、64 px，再依元件層級選擇。
| 層級 | 起始範例 | 用途 |
|---|---|---|
| 微小 | 4–8 px | 圖示與文字之間，以及標籤內部 |
| 元件內部 | 12–24 px | 按鈕、輸入框與卡片 Padding |
| 元件群組 | 16–32 px | 卡片之間的 Gap 與欄位間距 |
| 內容區段 | 32–64 px | 標題、段落與主要區塊節奏 |
| 頁面章節 | 64 px 以上 | 大型首頁區塊，需再看裝置與內容 |
這些是起始範例，不是通用標準。字級、行高、內容密度、品牌風格與裝置寬度都會影響最後數值。比固定照抄某套比例更重要的是同一層級一致，並在真實內容下測試。
桌機與手機間距怎麼調？
- 手機版水平空間有限，頁面左右 Padding 通常要比桌機小，但不能小到文字貼邊。
- 卡片從三欄變單欄後，桌機的水平 Gap 會轉為垂直 Gap，應重新檢查節奏。
- 按鈕可縮短左右 Padding，但要保留清楚的文字與操作範圍。
- 不要用負 Margin 把爆版內容硬拉回來，先找出 width、Padding、Border 或固定最小寬度的來源。
- 文字換行會改變卡片高度，測試真實長標題、價格、錯誤訊息與翻譯內容。
不用寫 CSS，也能用秒站調整頁面留白
懂盒模型能幫你判斷問題，不代表每次都要手寫 CSS。秒站的頁面編輯器會依區塊提供適用的排版欄位；Vibe 畫布還能設定整張畫布與頁首及頁尾之間的上下間距，選擇標準留白、無留白或自訂數值。
調整時仍建議遵循同一決策：內容貼邊先處理區塊內距，兩個區塊太近再調區塊間距，想做滿版視覺才把畫布上下間距設為無留白。完成後切換桌機與手機預覽，不要只在單一寬度判斷。
秒站操作文件：《區塊排版與圖片設定》（查證 2026-08-02）
網站間距實作 7 步驟
第 1 步：先畫出元素邊界
不確定空間屬於哪裡時，先暫時加上 Border 或使用瀏覽器開發者工具查看盒模型。確認是內容、卡片、父層容器，還是相鄰區塊的責任。
第 2 步：先處理元件內部 Padding
讓按鈕、卡片與輸入框的內容不貼邊。相同類型元件使用一致 Padding，避免每張卡片因內容長短產生不同節奏。
第 3 步：由父層設定重複項目的 Gap
卡片列、欄位群組與導覽項目優先由父層統一控制 Gap。這樣調整項目數量時，不必另外處理第一個和最後一個項目的 Margin。
第 4 步：再處理區塊外部 Margin
單一標題、段落或區塊需要和下一段分開時，再用 Margin。盡量讓垂直節奏由同一方向控制，避免上一個加 bottom，下一個又加 top，最後受 collapsing 影響而難以預測。
第 5 步：確認 box-sizing 與總寬度
元素有固定寬度或 100% 寬度時，檢查 Padding 與 Border 是否被加到外面。若使用視覺編輯器，查看父層寬度、欄位比例與區塊左右留白，不要只改子元素。
第 6 步：分別設定桌機與手機
依內容密度調低手機版的大型留白，保留閱讀與操作需要的內距。確認卡片改為單欄後的垂直間距，也要測試橫向捲動與固定元件。
第 7 步：用真實內容做最後 QA
放入較長標題、真實圖片、價格、表單錯誤與 CTA，檢查內容是否溢出，按鈕是否換行，背景是否斷裂，以及手機版是否出現水平捲軸。
Padding、Margin、Border 常見 9 個錯誤
- 用 Margin 放大按鈕，結果背景與可點擊區域沒有變大。
- 卡片內外距都加在子元素，造成首尾間距不一致。
- Grid 或 Flex 卡片逐張加 Margin，沒有由父層使用 Gap。
- 設定 width 100% 後又加左右 Padding，忽略 content-box 導致爆版。
- 把相鄰垂直 Margin 當成必定相加，沒注意 margin collapsing。
- 使用負 Margin 遮住父層尺寸問題，換到手機版就重疊。
- 只用 Border 顏色表示表單錯誤，沒有文字或圖示提示。
- 為了美觀隱藏鍵盤 focus outline，卻沒有提供可辨識的替代樣式。
- 每個區塊使用不同的臨時間距，沒有共同 spacing scale。
網站間距上線前檢查表
- 按鈕、卡片與輸入框的內部空間使用 Padding，不靠空白字元撐開。
- 重複卡片與欄位間距由父層 Gap 統一管理。
- 單一區塊的 Margin 有明確責任，沒有上下雙方重複加值。
- 固定寬度與 100% 寬度元件已確認 box-sizing。
- Border、Outline 與陰影各自負責邊界、焦點與視覺效果。
- 桌機與手機有分別預覽，沒有水平溢位或元件重疊。
- 長標題、表單錯誤、缺圖與多語內容都已實測。
- 同層級元件遵循一致的 spacing scale。
內文精華總結
- Padding 是內容與 Border 之間的內距，會影響背景與操作區域。
- Margin 是 Border 外的透明空間，用來處理元素和外部內容的距離。
- Border 是 Padding 與 Margin 之間的邊界層，可設定寬度、樣式與顏色，也會參與盒子尺寸。
- 重複項目間距優先用父層 Gap，按鈕與卡片內部留白用 Padding。
border-box能把 Padding 與 Border 納入指定寬度，減少常見爆版問題。
網站排版延伸閱讀
想把間距、內容與手機版做成一致的正式網站？
懂 Padding、Margin 與 Border，可以更快說清楚版面問題；真正上線還要一起處理內容層級、響應式設計、速度、SEO 與後續維護。秒站提供可直接調整的區塊與 Vibe 畫布，讓你先在實際頁面預覽，再決定各裝置的留白。
想確認現有網站的版面為什麼擠在一起或手機版爆開？可用 LINE 聯絡 @site-now。
重點整理
Padding、Margin、Border 有什麼差別？
Padding 是內容與 Border 之間的內距，通常會顯示元素背景，也能擴大按鈕等元件的可點擊範圍。Border 是包住內容與 Padding，並可設定寬度、樣式與顏色的邊界層。Margin 位在 Border 外側，是元素與其他內容之間的透明外距，不會擴大背景或點擊範圍。
什麼時候該用 Padding，什麼時候用 Margin？
希望空間屬於元件內部，例如按鈕文字到邊緣的空間，以及卡片內容到背景的空間，可使用 Padding。希望單一元素和外部內容分開，可使用 Margin。若是一列 Grid 或 Flex 卡片要保持一致間距，優先由父層使用 gap，通常比每個子元素分別加 Margin 容易維護。
Margin 與 Padding 四個值的順序是什麼？
四個值依順時針為上、右、下、左。一個值套用四邊；兩個值分別是上下與左右；三個值是上、左右、下；四個值才是上、右、下、左。例如 padding: 8px 16px 24px 32px，代表上 8 px、右 16 px、下 24 px、左 32 px。
為什麼 width 100% 加 Padding 會超出畫面？
CSS 的 box-sizing 初始值是 content-box，會把指定 width 當成內容寬度，左右 Padding 與 Border 再加到外面，因此 100% 寬度可能超出父層；但部分表格與表單控制項的瀏覽器預設可能是 border-box，除錯時應查看 computed value。改用 box-sizing: border-box 後，指定寬度會包含 Content、Padding 與 Border。也要檢查父層、最小寬度與 Margin，不要只用負 Margin 把元素拉回來。
Margin 可以用負值嗎？Padding 可以嗎？
Margin 允許負值，可能讓元素拉近或重疊；使用前要明確知道版面目的，並測試桌機與手機。Padding 不接受負值。若需要位移或重疊，應檢查版面結構，並選擇適合的 Margin、定位或 transform，不要期待負 Padding 生效。
Margin 為什麼沒有按照數值相加？
在特定 block flow 情境中，相鄰的垂直 Margin 會發生 margin collapsing。兩個正 Margin 接觸時，常由較大的值成為最後間距，而不是直接相加。Flex 與 Grid 項目不會以同樣方式合併 Margin；重複項目的間距可優先由父層使用 gap。
Border 和 Outline 有什麼不同？
Border 位在 Padding 與 Margin 之間，會參與盒模型尺寸。Outline 通常畫在 Border 外，不參與元素寬高計算，常用來顯示鍵盤焦點。不要為了美觀直接移除 focus outline；若要自訂，必須提供清楚可辨識的替代焦點樣式。
秒站可以不用寫 CSS 調整 Padding 或 Margin 嗎？
可以依區塊提供的排版欄位調整內容與區塊間距。Vibe 畫布也能設定整張畫布與頁首及頁尾之間的上下間距，選擇標準留白、無留白或自訂數值。不同區塊可調項目不完全相同，完成後仍要切換桌機與手機預覽，確認沒有溢位或重疊。
