Question

CSS中 margin 和 padding 的区别究竟是什么？它似乎没有多少用途。你能举个例子说明差异在哪里（为什么知道差异很重要）？

Answer 1

padding是内容与border之间的空格，而margin是边框外的空间。这是我通过快速Google搜索找到的图片，它说明了这个想法。

enter image description here

Answer 2

答案中缺少一件关键的事情：

上/下边距可折叠。

因此，如果元素底部的边距为20px，下一个元素顶部的边距为30px，则两个元素之间的边距将为30px而不是50px。这不适用于左/右边距或填充。

Answer 3

边距应用于元素的外部，从而影响元素远离其他元素的距离。

填充应用于元素的内部，从而影响元素内容远离边框的距离。

此外，使用margin不会影响元素的尺寸，而填充会使元素尺寸（设置高度+填充），例如，如果你有一个100x100px div和5 px填充，你的div实际上将是105x105px

Answer 4

请记住以下3点：

保证金是围绕控制的额外空间。
Padding是一个额外的空间内部控件。
外部控件的填充是内部控件的边距。

演示图像:(需要红色框控制）

Answer 5

最简单的辩护是; padding是容器元素边界内给出的空间，边距是在外面给出的。对于不是容器的元素，填充可能没有多大意义，但保证金的默认有助于安排它。

Answer 6

<强>填充

Padding是一个CSS属性，用于定义元素内容与其边框之间的空间（如果它有边框）。如果元素周围有边框，则填充将从该边框向该边框中显示的元素内容提供空间。如果元素周围没有边框，那么添加填充对该元素完全没有影响，因为没有边框可以提供空间。

<强>保证金

Margin是一个CSS属性，它将元素外部的空间定义为其下一个外部元素。

保证金会影响具有或没有边框的元素。如果元素具有边框，则边距将定义从此边框到下一个外部元素的空间。如果元素没有边框，则margin会定义元素内容到下一个外部元素的空间。

填充和保证金之间的区别

因此，边距和填充之间的区别在于，当填充处理内部空间时，边距处理外部空间到下一个外部元素。

Answer 7

填充是边框内的空间，而边距是边界的空间。

Answer 8

margin =从边界向外的元素周围（外部）。

padding =元素从文本到边框周围（内部）的空间。

见这里：http://jsfiddle.net/robx/GaMpq/

Answer 9

最好了解margin和padding之间的差异。据我所知：

边距是元素的外部空间，而填充是元素的内部空间。换句话说，边距是元素边框外的空间，而边距是边框内的空间。
您可以将auto值设置为保证金。但是，它不允许填充。 http://download.eclipse.org/technology/m2e/releases。
注意：使用margin: auto将块元素水平居中于其父元素中心。此外，通过将边距设置为auto，可以将元素垂直或水平或两者都置于Flexbox中。 See this。
保证金可以是任何浮点数，但填充不得为负数。
在为元素设置样式时，也会对样式进行填充;但不是保证金。边距获取父元素的样式。例如，当您将background-color属性设置为黑色时，其内部空间（即填充）将为黑色，但不是其外部空间（即边距）。

Answer 10

在任何答案中都没有提到保证金和填充之间的主要区别之一：可点击性和悬停检测

增加填充会增加元素的有效大小。有时我有一个小图标，我不想让它明显变大，但用户仍然需要与该图标进行交互。我增加了图标的填充，为点击和悬停提供了更大的空间。增加图标的边距不会产生同样的效果。

An answer关于这个主题的另一个问题给出了一个例子。

Answer 11

保证金是盒子外的空间; padding 是框内的空间。很难看到白色填充物的区别，但是使用彩色填充物可以看到它很好。

Answer 12

边距和填充都是填充类型......一个（边距）超出元素边界以使其与其他元素保持距离而另一个（填充）超出元素内容以使内容与内容保持距离元素边界。

Answer 13

Padding允许开发人员在文本和它的封闭元素之间保持空间。边距是元素与父DOM的另一个元素保持的空间。

参见示例：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

Answer 14

填充是在内容和边框之间计算的。边距是在边界外计算的。

Answer 15

填充是网页上最近组件之间的空格，边距是网页边距的空间。

Answer 16

边距应用于元素的外部，从而影响元素远离其他元素的距离。

填充应用于元素的内部，从而影响元素内容离边界的距离。

此外，使用margin不会影响元素的尺寸，而填充会使元素尺寸（设置高度+填充），例如，如果你有一个100x100px div和5 px填充，你的div实际上将是105x105px

Answer 17

有一个重要区别：

边距 - 位于元素的外部，即一个将在元素开始之后“应用”空白移位。填充 - 在内部，另一个将在元素开始之前“应用”空白。

Answer 18

边距是CSS中的一个属性，用于在边框外的元素周围创建空间。程序员可以为顶部，右侧，底部和左侧设置边距。换句话说，他可以使用margin-top，margin-right，margin-bottom和margin-left来设置这些值。

保证金值可以是以下类型。

首先，自动允许浏览器计算利润率。此外，长度表示以px，pt或cm为单位的边距，而％有助于将边距描述为相对于包含元素的宽度的百分比。最后，继承表示边距必须从父元素继承。

填充是CSS中的属性，可帮助在边框内的元素周围创建空间。程序员可以为顶部，右侧，底部和左侧设置填充。换句话说，他可以使用padding-top，padding-right，padding-bottom和padding-left来设置这些值。

填充值可以是以下类型。

长度以px，pt或cm为单位描述填充，而％表示填充相对于所包含元素的宽度的百分比。最后，继承描述了填充应该从父元素继承。

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

边距和填充之间的差异

边距是一个CSS属性，用于在定义的边界之外的元素周围创建空间，而 padding 是一个CSS属性，用于在元素周围创建空间元素，在定义的边界内。因此，这解释了边距和填充之间的主要区别。

值此外，margin的值可以是auto，length，％或herit，而padding的值可以是length，％或Inherit type。因此，这是边距和填充之间的另一个区别。

简而言之，边距和填充是CSS中的两个属性，可用于设置网页的样式。无法为这些属性分配负值。边距和填充之间的主要区别在于，边距有助于在边框外部的元素周围创建空间，而填充则有助于在边框内部的元素周围创建空间。

Answer 19

我对边距和填充的理解来自于所附图片中的Google开发人员工具

用简单的话来说，空白是元素周围的空间，填充是指元素与元素内部内容之间的空间。两者都被用来制造差距，但方式不同。

使用保证金来创建缺口：

在创建间隙边距时会将相邻元素推开

使用填充创建间隙：

使用填充来创建间隙会增大元素的大小或缩小内部的内容

为什么要知道这些区别很重要？

了解差异非常重要，这样您才能知道何时使用它们中的任何一种并适当地使用它们。

还值得注意的是，在设计网站布局时，边距和填充非常方便，因为margin指定元素是向上还是向下，向左或向右移动，而padding指定元素在容器中的外观和位置。

Answer 20

不言自明的图片

L - Left, R- Right and T - Top, B - Bottom

Answer 21

尝试在宽度和高度的块div上放置背景颜色。您将看到填充增加了元素的大小，而边距只是将其移动到文档流中。

保证金专门用于转移元素。

Answer 22

基本上，填充和边距之间的差异来自背景。填充将决定内容之间的空间，而边距决定元素的外边缘！

Answer 23

我刚刚注意到的一件事，但没有提到上述答案。如果我有一个动态创建的DOM元素，并且该元素以空的内部html内容初始化，那么如果您不希望此空元素占用创建内容的空间，则最好使用空白而不是填充。

Answer 24

填充是内容与边框之间的空间。边距是边框与其他元素之间的空间。

保证金和填充之间的差异？

24 个答案: