Margin vs Padding

在设计用户界面时，有时会对 padding 和 margin 感到困惑。它们都用于提供额外的空间或间隙。padding 和 margin 都可以作用于元素的四个边，并且在没有 border 属性的情况下也能工作，但它们在很多方面有所不同。

padding 和 margin 的主要区别是

• padding 在 border 和元素的 content 之间提供空间。
• margin 在 border 和外部元素之间提供空间。

因此，当我们需要元素之间的空间时，最好使用 margin；当我们需要内部元素和父级框之间的空间时，则使用 padding。

margin 和 padding 的基本区别如下表所示：

我们可以查看下图来清楚地区分 margin 和 padding。在此图中，margin 指的是 border 外的区域，padding 指的是 border 内的区域。

让我们分别讨论 margin 和 padding。

边距

CSS margin 属性定义了元素周围的空间。它完全透明，没有任何背景颜色。它会清除元素周围的区域。

我们可以使用单独的属性 margin-top, margin-bottom, margin-left 和 margin-right 来独立地更改顶部、底部、左侧和右侧的 margin。我们也可以使用简写 margin 属性一次性更改所有属性。

有四种指定简写 margin 属性的方法，如下所示：

• margin: 50px 100px 150px 200px;
  这表示 top margin 值为 50px，right margin 值为 100px，bottom margin 值为 150px，left margin 值为 200px。
• margin: 50px 100px 150px;
  这表示 top margin 值为 50px，left 和 right margin 值为 100px，bottom margin 值为 150px。
• margin: 50px 100px;
  这表示 top 和 bottom margin 值为 50px，left 和 right margin 值为 100px。
• margin: 50px;
  这设置了 top, right, bottom 和 left margin 的相等值。

简写 margin 属性的示例如下：

示例

输出

在下面的输出中，我们可以看到屏幕上有一个滚动条。这是因为 margin-bottom 的值为 150px。

填充 (Padding)

与 margin 属性不同，CSS padding 属性定义了元素内容和元素 border 之间的空间。

CSS padding 会受到背景颜色的影响。它会清除内容周围的区域。

我们可以使用单独的属性 padding-top, padding-bottom, padding-left 和 padding-right 来独立地更改顶部、底部、左侧和右侧的 padding。我们也可以使用简写 padding 属性一次性更改所有属性。

有四种指定简写 padding 属性的方法，如下所示：

• padding: 50px 100px 150px 200px;
  这表示 top padding 值为 50px，right padding 值为 100px，bottom padding 值为 150px，left padding 值为 200px。
• padding: 50px 100px 150px;
  这表示 top padding 值为 50px，left 和 right padding 值为 100px，bottom padding 值为 150px。
• padding: 50px 100px;
  这表示 top 和 bottom padding 值为 50px，left 和 right padding 值为 100px。
• padding: 50px;
  这设置了 top, right, bottom 和 left padding 的相等值。

示例

在此示例中，我们使用简写属性 padding 来指定内容和 border 之间的空间。

输出