初學時Margin、Padding傻傻分不清楚，心想反正畫面有就好了，被問了『你何時用Margin?何時用Padding?』，於是針對這個議題展開了追尋。這裡會談一下box-model以及Margin與Collapsing margins（外距折疊）並談一些Padding。

Box-model

這是我們在DevTools看到的盒模型

Udemy Advanced CSS and Sass

以上為Udemy Advanced CSS and Sass提到Box Modle，在此引用。

這是規範目錄與盒模型

看看規範說了什麼？

規範節錄重點摘要：

• 盒子包括內容Content、內距Padding、框線Border和Margin外距，每個區域可以分解為頂部、右側、底部和左側的部分。
• 盒子的『內容區域』尺寸取決於多個因素，例如元素的屬性設定和內容類型。
• 背景樣式由'background'屬性指定，Margin外距的背景始終是透明的。

這裡我就不付上原文，有興趣可以前往8.1 Box dimensions探險。

• 寫法是這樣margin、padding都一樣(想著盒子順時鐘跑)

.card {
 margin: 1px 1px 1px 1px (上左下右)
 margin: 1px 1px 1px (上 左右 下)
 margin: 1px 1px (上下 左右)
}

Margin 外邊距

W3C 8.3 Margin

• Margin properties specify the width of the margin area of a box.
• The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side.
• These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
• Negative values for margin properties are allowed, but there may be implementation-specific limits.

簡單總結一下：

• 屬性：'margin-top'、'margin-right'、'margin-bottom'、'margin-left' 和 'margin'
• 屬性用於指定盒子的邊距區域的寬度。
• 'margin' 縮寫屬性設定所有四個邊的邊距，而其他邊距屬性只設定各自的邊。
• 這些屬性適用於所有元素，但垂直邊距，對於『非替換的內聯元素』（non-replaced inline elements）沒有任何影響。

名詞解釋補充

• 替換內聯元素(replaced inline elements) ：

  • 替換元素是指那些在渲染過程中被替換為其他內容的元素，通常是外部資源（如圖像、音訊或視訊）的容器或占位符。這些替換元素可以嵌入到文件中，並且通常由外部資源產生其內容，而不是直接包含在文件中。例如： <img>（顯示影像）、<audio>（播放音訊）、<video>（播放影片）等。

• 非替換的內聯元素（non-replaced inline elements）

  • 在文件中以內聯方式出現的元素，它們的內容直接包含在文件中，而不是作為外部資源的容器或占位符。這些元素的內容通常由文字、其他內嵌元素或巢狀元素構成。例如：<span>、<a>、<strong>、<em>。

Collapsing margins 外距折疊(塌陷)

什麼是塌陷呢？又叫做折疊？起初我剛遇到這問題的時候，也是what happen?滿臉問號。簡單來說就是， 『Margin比大小』，當兩個以上Ｍargin相遇，大的會吃掉小的。讓我們來看看規範大人怎樣說這件事呢？

W3C 8.3.1 Collapsing margins

• In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.
• Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

但是它有例外啦！

Adjoining vertical margins collapse, except:

• Margins of the root element's box do not collapse.
• If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
• If the top margin of a box with non-zero computed 'min-height' and 'auto' computed 'height' collapses with the bottom margin of its last in-flow child, then the child's bottom margin does not collapse with the parent's bottom margin.

簡單總結一下，

• 在CSS中，相鄰的兩個或多個框的邊距（可以是兄弟元素也可以不是）可以合併成一個單一的邊距，稱為折疊外邊距。
• 垂直相鄰的邊距通常會折疊，但有例外情況，如:根元素框的邊距不會折疊。 水平邊距永遠不會折疊。
• 邊距折疊的條件包括屬於同一塊格式化上下文的內聯塊級框、沒有線框、間隔、內邊距和邊框分隔它們、以及它們屬於垂直相鄰的框邊緣。
• 折疊外邊距不僅可以由兄弟元素生成，還可以由不相關的元素生成。
• 一些情況下的邊距折疊規則，例如：浮動框與其他框的邊距不會折疊，建立新塊格式化上下文的元素的邊距不會與內聯子元素折疊等。
• 當多個邊距折疊時，最終的合併邊距寬度，取決於折疊邊距寬度的『最大值』。
• 如果一個框的『頂部』和『底部』邊距相鄰，邊距可以透過該框折疊，影響元素的定位。

Padding

W3C 8.4 Padding

• Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

• 屬性：'padding-top'、'padding-right'、'padding-bottom'、'padding-left' 和 'padding'
• 與Margin屬性不同，Padding不能為負值。與Margin屬性類似，Padding的百分比值是相對於生成框的包含區塊寬度的。
• 填滿區域的表面顏色或影像可以透過 ‘background’ 屬性指定。

何時用Margin?何時用Padding?

以下是目前自己的一些想法

• 回歸最簡單的用法，Ａ與Ｂ在同層的時候，兩著之間的距離自然會用Margin，在邊框Border以內，基本上則會用Padding了。
• 然而有時還是會碰到一些況狀，例如：框線問題或者越細部的結構。有時候，本該用Padding的地方，用Margin就可以處理一下問題，或者刻意利用Collapsing margins的特性來達成某些需求。
• 除此之外，如果要設定-bottom，那最好是都固定設定-bottom，不要一下-top一下-bottom，好處是，比較不會忘掉，要調整的時候比較好找，除非刻意為之要來個Collapsing margins XD

最新規範參考：
CSS Box Model Module Level 3