襯墊(padding)和邊緣(margin)的區別

任何一個在設計界冒險的人都一定聽說過“邊距”和“填充物”這兩個詞經常被丟擲。儘管許多學習者理解邊距和填充都是指元素之間的空間，但他們無法區分邊距和填充。任何瞭解這兩個術語之間區別的人都可以做出更好的設計決策。...

任何一個在設計界冒險的人都一定聽說過“邊距”和“填充物”這兩個詞經常被丟擲。儘管許多學習者理解邊距和填充都是指元素之間的空間，但他們無法區分邊距和填充。任何瞭解這兩個術語之間區別的人都可以做出更好的設計決策。

什麼是填充？

填充是指元素和邊框之間的空間。重要的是要強調，填充圍繞著內容的所有四個方面。

什麼是利潤？

邊距是指元素和外部元素之間的空間。它是一個元素和另一個元素之間的邊界。

填充和邊距之間的差異

填充和邊距的相互作用

邊距和填充之間的主要區別之一是它們之間的相互作用。填充與設計或物件的內部組成部分相互作用，因為它是所考慮物件的邊界和內容之間的空間。另一方面，邊緣與被註意物件的外部環境相互作用，因為它是物件和下一個物件之間的空間，距離物件最近。

填充和邊距的目的

邊距和填充都是根據它們的用途或它們在物件中所扮演的角色來區分的。邊緣的主要目的是確保物體四周不暴露於物體周圍的其他物體。它為整個物件提供安全性，使物件不受外部環境的幹擾或影響。另一方面，填充的作用是確保物件的內容不與邊界互動。填充確保內容物不會接觸到覆蓋它們的物體的邊緣，因此起到減震器的作用。

在不同瀏覽器下表現不同

margin和padding之間的一個主要區別是它們在不同瀏覽器下的行為不同。人們會發現，某個瀏覽器處理物件的外部空間和內部空間，而另一個瀏覽器拒絕處理邊距或填充。有時，可能會發現瀏覽器拒絕處理物件的任何空格—可能是邊距或填充。這就解釋了為什麼某些頁邊距在某些瀏覽器上掛載時會自動摺疊。

對填充和邊距大小的影響

區分邊距和填充的另一個因素是它們在行為方式上有一些顯著的不同，或者它們影響物件的高度和寬度。邊距透過確保物件的寬度和高度都增加幾英寸來增加物件的大小。這是因為邊距位於物件外部，它試圖影響物件外部的空間。另一方面，填充對物件的大小沒有影響，因為它不影響物件的寬度和高度。實際上，填充在物件內部，這意味著它不能影響包含它的物件的大小。

何時使用填充和邊距

最後，何時使用邊距與何時使用填充不同。這意味著，儘管這兩個空間在各自的用途上存在顯著差異，但在每個空間的實際使用方面，也可以表現出一些顯著差異。填充主要用於希望背景色在建立的空間中繼續時。這意味著當人們希望自己的背景被窺視時，他們會使用填充。另一方面，當人們希望自己的背景色侵入個人空間時，他們會使用邊距。

Table Illustrating Differences Between Margin and Padding

保證金	襯墊
不同元素之間的空間	內容和元件邊緣之間的空間
用於增加元件的大小	無法增加元素的大小
當一個人想要背景色侵入個人空間時使用	當一個人想要背景色向外窺視時使用
與元素的外部環境互動	與元素的內部環境互動