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>