CSS margin vs padding

在 CSS 中，margin 和 padding 是用于控制元素周围空间的重要属性。这两个属性看上去很相似，但实际上有很大的区别。本文将详细介绍 margin 和 padding 的定义、作用、用法及其差异性。

margin 属性

margin 属性是用于控制元素与元素之间或元素与容器之间的空间。这个属性可以为一个元素设置上下左右四个方向的 margin，也可以单独设置某个方向的 margin。margin 的值可以是一个长度值（如 px、em、rem 等），也可以是百分比。

例如，可以使用以下 CSS 代码设置一个带有外边距的 div 元素：

div {
  margin: 20px;
}

这会为 div 元素的四个方向（上下左右）设置相同的 margin。

padding 属性

padding 属性是用于控制元素的内边距。内边距是元素内容与边框之间的距离。padding 的值可以使用与 margin 相同的单位。同样可以为一个元素设置上下左右四个方向的 padding，也可以单独设置某个方向的 padding。

例如，可以使用以下 CSS 代码设置一个带有内边距的 div 元素：

div {
  padding: 20px;
}

这会为 div 元素的四个方向（上下左右）设置相同的 padding。

差异性

margin 和 padding 最大的区别在于它们的作用对象不同。margin 是设置元素与元素之间或元素与容器之间的距离，而 padding 是设置元素内容与边框之间的距离。另外，margin 可以设置为负值，这意味着元素会向外延伸，而 padding 不支持负值。

另外，当一个元素有边框时，边框也会占用元素的空间。例如，如果一个元素的宽度为 200px，边框为 1px，如果设置了 10px 的 padding，那么元素的实际宽度将变为 222px（200px + 1px x 2 + 10px x 2）。

总结

margin 和 padding 都是用来控制元素空间的 CSS 属性，但它们的作用对象不同。margin 是用于设置元素与元素之间或元素与容器之间的距离，而 padding 则是用于设置元素内容与边框之间的距离。使用时要注意它们的差异性，以避免在样式处理中出现问题。