Padding和Margin有什么区别？

CSS面试题 5月前 0 42

Padding 和 Margin 都是 CSS 中用来控制元素周围空白区域的属性，但它们的用途和效果有一些不同。

Padding（内边距）：Padding 是元素的内边距，它位于元素的边框和内容之间。增加 Padding 可以增大元素的总尺寸，因为 Padding 是添加到元素内容的宽度和高度之上的。如果元素有背景色或背景图，Padding 区域也会显示这个背景。
例如：
```
div {
 background-color: lightblue;
 padding: 10px;
}
```
这会创建一个 div，其内容周围有 10px 的 lightblue 背景色区域。
Margin（外边距）：Margin 是元素的外边距，它位于元素的边框和其他元素之间。增加 Margin 不会增大元素本身的尺寸，但会增大元素周围的空白区域。Margin 区域是透明的，不显示元素的背景色或背景图。

例如：
```
div {
 background-color: lightblue;
 margin: 10px;
}
```
这会创建一个 div，其周围有 10px 的透明区域，这个区域会将 div 与其他元素分开。

总结一下，Padding 是元素的内部空间，它会影响元素的尺寸，并且会显示元素的背景。Margin 是元素的外部空间，它不影响元素的尺寸，只影响元素与其他元素的距离，并且不显示元素的背景。