CSS 中的邊距與填充：有什麼區別以及何時使用它們？

了解 CSS 中邊距和填充的區別

使用 CSS 時，區分邊距和填充至關重要。這兩個屬性都會影響頁面元素的間距，但它們的作用方式不同。

Margin

• 定義元素邊界以外的空間。
• 可以與相鄰元素的邊距重疊。
• 不包含在元素的可點擊區域或背景顏色/影像。

填滿

• 定義元素內容區域內的空間。
• 保留元素之間的空間，即使相鄰元素有內邊距。
• 包含在元素的可點擊中區域和背景顏色/圖像。

何時使用邊距或內邊距

了解這些差異，確定何時使用邊距或內邊距至關重要：

• 當您想要在元素之間保持特定距離時，無論它們的距離如何，請使用邊距
• 當您想要在元素內容周圍添加空間時，請使用填充，包括影響其大小和可點擊性。

範例

下面的程式碼片段直觀地示範了邊距和填充之間的區別。它在包含框中使用兩個元素：

<div>
<p><strong>預設：</strong></p>
<p>元素並排放置，沒有額外的間距。 </p>
<p><strong>填滿：</strong></p>
<pre class="brush:php;toolbar:false"><div>
<p>加入每個元素頂部的 20 像素內邊距會增加元素之間的空間，同時保留元素本身內的空間。 </p>
<p><strong>邊距：</strong></p>
<pre class="brush:php;toolbar:false"><div><p>增加20 像素的邊距每個元素的頂部也會增加它們之間的空間，但元素內容之間的空間不變。此外，如果元素指派了按一下事件，則可按一下區域將僅包括內容而不包括邊距。 </p></div>