保證金和填充之間的區別？

268

在CSS中，保證金和填充究竟有什麼區別？它似乎並沒有達到很多目的。你能否給我一個例子，說明差異在哪裏（以及爲什麼知道差異很重要）？保證金和填充之間的區別？

2011-05-11 maclunian

+11

http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css http://stackoverflow.com/questions/3060456/difference-bw-padding邊距http：// stackoverflow。com/questions/4619899 /差別之間的意見填充和邊緣首先三個鏈接搜索'填充vs邊距'。我認爲我們需要在搜索欄中添加箭頭並使其變綠。 – William 2011-05-11 02:52:16

這可能會幫助您瞭解差異http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html – lkamal 2013-11-09 12:06:16

也請注意，Internet Explorer以不同的方式將邊距/邊框/填充寬度相加（在默認非怪癖模式下）比幾乎所有其他瀏覽器。 – 2014-05-01 15:54:42

最簡單的辯護是; 填充是在容器元素的邊界內給出的空間，邊界是在外部給出的。對於不是容器的元素，填充可能沒有多大意義，但邊距有利於排列它。

來源

2010-06-17 12:53:43

margin =從邊框向外的元素（外部）。

padding =從文本到邊框的元素周圍（內部）。

在這裏看到：http://jsfiddle.net/robx/GaMpq/

來源

2011-05-11 02:51:26 robx

保證金是外箱空間; 填充是框內空間。很難看出它與白色填充物的區別，但用彩色填充物可以很好地看到它。

來源

2011-05-11 02:51:51

312

padding是內容和border之間的空格，而margin是邊界之外的空格。這是我從快速Google搜索中找到的一張圖片，它說明了這個想法。

enter image description here

來源

2011-05-11 02:52:17 abcd

也請查看這些網站以獲取定義。但圖形是一個完美的例子。 http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp – Suroot 2011-05-11 02:53:32

@maclunian：同時看看這個網站http：//www.w3schools .com/css/css_boxmodel.asp以及@ Suroot上面的鏈接。 – abcd 2011-05-11 02:58:05

這與內容的寬度和高度有何關係？在這一切上測量的是哪裏？ – Nyerguds 2016-09-27 08:28:05

嘗試把一個背景顏色上與寬度和高度的塊DIV。您會看到填充會增加元素的大小，而邊距只是將其移動到文檔的流程中。

保證金專門用於移動元素。

來源

2011-05-11 02:52:36 Henry

將邊距應用於之外的因此影響元素距離其他元素的距離。

填充用於裏面的元素因此影響元素的內容離邊界有多遠。

此外，使用保證金不會影響元素的尺寸，而填充會讓你的元件的尺寸（設定高度+填充），因此，例如，如果你有一個5像素填充一個100x100px DIV，你的DIV實際上是105x105px

來源

2011-05-11 02:54:05 LostLin

+11

我相信填充應用到每一個方面，所以該元素將110x110px – 2013Asker 2013-07-22 07:21:14

埃姆，據我所知填充不如果寬度已被設置爲'auto'其他任何更改元素的寬度。如果寬度是'auto'，那麼額外的填充將相應地增加填充元素的寬度（並且從@ 2013Asker提到的雙方都是這樣） – Flater 2014-05-22 12:28:21

我認爲它有點誤導地說你div將110px乘以110px，因爲寬度你的div仍然是100px（假設box-sizing被設置爲內容框）。 – wmock 2016-02-02 04:41:43

有一個重要的區別：

邊緣 - 位於元素的外部，即一個將在元素開始之後應用空白移位。填充 - 在內部，另一個將在元素開始之前應用空白。

來源

2011-05-11 03:04:11 Ars

將邊距應用到您的元素的外部，從而影響您的元素遠離其他元素的距離。

填充應用於元素的內部，從而影響元素的內容遠離邊界的距離。

此外，使用保證金不會影響元素的尺寸，而填充會讓你的元件的尺寸（設定高度+填充），因此，例如，如果你有一個5像素填充一個100x100px DIV，你的DIV實際上是105x105px

來源

2013-02-28 16:54:43

你注意到這個答案已經被給出了嗎？ - 並加入了適當的重點？ – JerryOL 2013-07-14 17:05:00

邊距和填充都是真正的填充類型。一個（邊距）超出了元素邊界的距離，使它與其他元素保持距離，另一個（填充）超出了元素的內容，從而使內容與元素保持距離邊境。

來源

2013-04-02 11:47:59 chunkyboy

是在這裏的答案缺少一個關鍵的事情：

上/下邊距是可摺疊的。

因此，如果您在元素的底部有20px的邊距，下一個元素的頂部有30px的邊距，則兩個元素之間的邊距將爲30px而不是50px。這不適用於左/右邊距或填充。

來源

2013-06-17 22:02:41 Nathan

請注意，非常特殊的情況下，垂直邊緣會崩潰 - 不僅僅是任何兩個垂直邊緣都會這樣做。這使得它更容易混淆（除非你非常熟悉盒子模型）。 – BoltClock 2016-05-08 17:20:12

記住以下3點：

的保證金是多餘的空間周圍控制。
填充是額外的空間裏面的控制。
填充外部控件是內部控件的邊距。

演示圖片：（其中，紅色框是慾望控制）

來源

2013-12-24 05:27:13 sms247

填充是在網頁上最近的組件之間的空間和餘量是從網頁的餘量空間。

來源

2014-01-15 05:48:16

-1

基本上，填充和邊距之間的區別來自背景。填充將決定內容之間的空間，而邊距決定元素的外部邊緣！

來源

2014-07-16 15:20:50

填充允許開發人員在文本和它的封閉元素之間保留空格。邊距是元素用父DOM的另一個元素維護的空間。

參見例如：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UT-8"> 
    <title>Pseudo Elements</title> 
    <style type="text/css"> 
     body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;} 
     .page 
     { 
      background-color: #fff; 
      padding: 10px 30px 50px 50px; 
      margin:30px 100px 30px 300px; 
     } 
    </style> 
</head> 
<body> 
    <div class="page"> 
     Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div> 
</body>

來源

2014-07-27 06:27:23 Rajat

填充是空間內部邊界，而保證金是空間外的邊界。

來源

2014-11-19 14:10:54

填充

填充是定義一個元素含量和它的邊界之間的空間（如果它有一個邊框）CSS屬性。如果元素周圍有邊框，則填充將從該邊框給出出現在邊框中的元素內容的空間。如果一個元素周圍沒有邊框，那麼添加填充對該元素根本沒有影響，因爲沒有邊框可以給出空間。

保證金

保證金是定義元件的外部的空間至其下一個外部元件的CSS屬性。

保證金會影響具有或不具有邊框的元素。如果元素具有邊框，則邊距將定義從此邊框到下一個外部元素的空間。如果某個元素沒有邊框，則邊距將定義從元素內容到下一個外部元素的空間。

差分padding和margin

之間，從而margin和padding之間的差異在於，雖然填充涉及的內部空間，與外空間到下一個外部元件餘量交易。

來源

2015-01-20 12:12:57

哪些元素沒有邊框？ – 2017-02-05 14:25:23

-6

填充是您的內容和邊框之間的空間。其中邊距是邊框與其他元素之間的距離。

來源

2015-07-28 09:05:07

邊距並不是那麼簡單，這並不能說明任何十幾個前面沒有提到的答案。 – Quentin 2015-07-28 09:08:06

你剛剛重複以前的答案。 – 2015-07-28 09:08:54

此答案已經在上面發佈。 – Bruce 2015-07-28 09:10:15

之一邊距和填充之間的主要區別是不以任何的答案中提到：可點擊和懸停檢測

增加填充增加了元件的有效尺寸。有時候我有一個小圖標，我不想讓它看起來更大，但用戶仍需要與該圖標互動。我增加了圖標的填充，使其具有更大的點擊和懸停空間。增加圖標的邊距不會有相同的效果。

An answer關於這個話題的另一個問題舉了一個例子。

來源

2016-05-08 17:09:02 Paul

最頂級的答案是指填充是部件和利潤是它的「外」，這意味着已經填充貢獻較大的點擊區域的「內部」。當你處理一個完全透明的盒子時，它並不是那麼明顯，但是...... – BoltClock 2016-05-08 17:16:11

很高興知道margin和padding之間的差異。據我所知：

保證金是元素的外層空間，而填充是一個元素的內部空間。換句話說，margin是元素邊界外的空間，padding是邊界內的空間。
您可以將auto值設置爲保證金。但是，不允許填充。 See this。
注意：使用margin: auto將塊元素水平放置在其父元素的中間。
保證金可以是任何浮動數字，但填充不能是負數。
當你設計一個元素的樣式時，padding也會被設置樣式;但不是保證金。邊距獲取父元素的樣式。例如，將background-color屬性設置爲黑色時，其內部空間（即填充）將爲黑色，但不是其外部空間（即邊距）。

來源

2016-06-13 17:43:12 MAChitgarha

保證金和填充之間的區別？

回答

相關問題