CSS空白和填充:有什么区别?

如果你是新手CSS.，你可能听过这句话保证金和填充但是不太确定它们的意思，或者如何在你的网站设计中使用它们。这些概念在CSS中做了类似的事情。然而，它们并不是完全相同的，它们的用法有重要的根本区别。

一旦你完全理解了页边距和内边距的区别，你就能够为你的网站做出更好的设计决策。我们来看看这两个性质和它们的作用。我们将包括大量可视化示例来说明这些重要的CSS组件是如何工作的。

在CSS中，边距和填充的区别是什么?

在CSS中，margin是元素边框周围的空格，padding是元素边框和元素内容之间的空格。换句话说，边际属性控制空间外元素和padding属性控制空间内部一个元素。

我们先来看看边际。考虑下图所示的元素，它的边距为10像素:

这意味着这个元素和相邻的页面元素之间至少有10个像素的空间——边距“推开”了它的相邻元素。如果我们把这些元素放在一起，我们会看到边距是如何在它们之间创造空白的，给它们喘息的空间:

另一方面，填充位于元素的边框内。下面的元素在左右两边有10px的填充，在上下两边有15px的填充:

为了创建间隙，填充要么增大元素的大小，要么缩小元素内部的内容。默认情况下，元素的大小增加。如果您想通过缩小内容来创建间隙，请设置box-sizing财产border-box(即。box-sizing: border-box)。

什么时候使用边距和填充

当您调整设计的布局时，您需要决定是更改页边距还是填充以达到理想的视觉效果。在这一节中，我们将介绍每个属性的一些常用用法，从边距开始。

用途的利润率

CSS的页边距决定了元素周围的空间。因此，边距可以用来…

更改元素在页面上的位置

CSS页边距可以在页面上上下移动元素，也可以向左或向右移动元素。如果页面的宽度是固定的，那么元素的水平居中就很简单:只需指定值保证金:汽车。

看到这支笔CSS空白vs.填充-空白:自动杰米(@websitejamie)CodePen。

设置附近元素之间的距离

边缘确定相邻元素之间的空间量，或空格。空白对于网页的视觉效果非常重要。例如，使用边距在图像之间或图像与其下方的文字描述之间添加空格:

看到这支笔CSS空白vs.填充-图像空白杰米(@websitejamie)CodePen。

重叠元素

另一方面，负边距值允许您重叠页面元素。这可以派上用场时，试图实现一个破碎的网格效应。

看到这支笔CSS边缘与填充 - 损坏网格效果杰米(@websitejamie)CodePen。

用于填充

CSS填充决定了内容在其各自元素中的外观。你可以改变CSS填充来实现以下效果:

在内容和边框之间添加空格

这是padding最常见的用法，对于在元素中创建空白非常有用。

看到这支笔CSS空白vs.填充-填充大小杰米(@websitejamie)CodePen。

更改元素的大小

当您增加填充值时，内容将保持相同的大小，但您将在内容周围添加更多空间。对于展开可点击区域时，这对于互动元素（如按钮）很有用。

CSS框模型

要了解边距和填充如何一起设置元素内容的间距，我们还可以使用CSS框模型。CSS框模型用于页面设计和布局。本质上，文档中的每个HTML元素都被包装在一个分层框中，该框由边距、边框、填充和内容组成:

一旦您理解了CSS框模型，将高度和宽度应用到元素就很容易了。为了确保正确对齐，您只需要做一些简单的计算。然而，如果您对框模型的工作方式感到困惑，您可能会以草率的布局告终。要了解关于这个概念的更多信息，请参阅我们的CSS框模型的指南。

CSS空白、填充和边框

边框是CSS框模型的层，位于边距和填充之间。默认情况下，边框没有任何宽度，但是你可以用CSS设置一个边境财产。

边距和填充总是元素的一部分，即使没有可见的边框。这幅图说明了这样一个例子:

这可能会让初学者感到困惑——这两个内容块没有可见的边框，但边界和填充仍然适用。

如何添加页边距在CSS

每个HTML元素都有四个边距可以切换:顶部、右侧、底部和左侧。

要在元素的所有四个边设置相同的边距值，请使用保证金财产。若要设置元素的特定边距，请使用margin-top,margin-right,margin-bottom,margin-left属性。

看到这支笔CSS空白vs.填充-设置空白杰米(@websitejamie)CodePen。

也可以指定保证金根据您想要施加利润率的两侧，有两个，三个或四个值的财产。如果您想要每侧的边距，您只需应用一个值。否则，值的顺序很重要：

• 两个值应用于顶部和底部，然后是右和左。
• 三个值应用于顶部，然后右，左，然后下。
• 四个值应用于顶部，然后是右，然后是下，然后是左。

看到这支笔CSS Margin vs. Padding - Setting Margin 2杰米(@websitejamie)CodePen。

每个值可以表示为固定长度(通常以px为单位)、百分比(将值定义为其容器宽度的百分比)或汽车（允许浏览器设置边距）。

如何在CSS中添加填充

与边距一样，padding也有四个边需要声明:上、右、下和左。

若要在所有边设置填充，请使用速记属性填充。为特定边设置填充，请使用填充顶部,padding-right,填充底部,padding-left属性。

看到这支笔CSS空白vs.填充-设置填充1杰米(@websitejamie)CodePen。

当使用填充属性，您也可以使用两个、三个或四个值来定义填充。与边距一样，一个值将应用于所有的四个边。否则，写值的顺序将决定哪边适用:

• 两个值应用于顶部和底部，然后是右和左。
• 三个值应用于顶部，然后右，左，然后下。
• 四个值应用于顶部，然后是右，然后是下，然后是左。

看到这支笔CSS空白vs.填充-设置填充2杰米(@websitejamie)CodePen。

每个值可以表示为固定长度或百分比(将其定义为容器宽度的百分比)。。

CSS页边距和填充:相似，但不一样

要在CSS中分隔元素，通常使用保证金和填充属性。理解两者的区别是迈向掌握CSS的一步。您现在还知道如何使用速记属性设置边距和填充，这比单独定义每边要快得多。

在网页设计和网页开发中，HTML和CSS是齐头并进的。HTML定义内容结构和语义，而CSS建立样式和布局。如果你是一个初学者，我们建议在尝试CSS之前完全熟悉HTML。在学习CSS的过程中，请继续学习HTML，直到完全理解HTML为止。一旦应用了CSS, HTML就变得有趣多了。

编者按:本文最初发表于2020年4月，现已全面更新。