如何区分内外边距

在CSS中，margin和padding都可以创建元素周围的空间，但它们的应用有所不同。

1. 内边距 (padding)：内边距是元素内容与元素边界之间的空间。如果你给元素添加背景色，内边距的部分也会被背景色覆盖。换句话说，内边距是元素的一部分，改变内边距可以改变元素的大小。

2. 外边距 (margin)：外边距是元素边界与周围元素之间的空间。它存在于元素的外部，与元素的背景色无关。外边距主要用来控制元素与其周围元素的距离。

以下是一个图解，帮助你更好地理解margin和padding的区别：

  |---------------------------------------------------|
  |  margin                                            |
  |    |-------------------------------------------|  |
  |    |  border                                   |  |
  |    |    |-----------------------------------|  |  |
  |    |    |  padding                          |  |  |
  |    |    |    |---------------------------|  |  |  |
  |    |    |    |  content                 |  |  |  |
  |    |    |    |---------------------------|  |  |  |
  |    |    |                                   |  |  |
  |    |    |-----------------------------------|  |  |
  |    |                                           |  |
  |    |-------------------------------------------|  |
  |                                                   |
  |---------------------------------------------------|

在这个图解中，“content” 是元素的内容，“padding” 是内边距，“border” 是元素的边界，“margin” 是外边距。