【问题标题】:Difference between margin and padding?边距和填充之间的区别?
【发布时间】:2011-08-22 22:56:13
【问题描述】:

ma​​rginpadding 在 CSS 中到底有什么区别?它似乎真的没有多大用处。您能否举例说明差异所在(以及为什么了解差异很重要)?

【问题讨论】:

标签: css


【解决方案1】:

padding 是内容和border 之间的空间,而margin 是边界外的空间。这是我通过 Google 快速搜索找到的一张图片,说明了这个想法。

【讨论】:

【解决方案2】:

这里的答案中缺少的一个关键点:

顶部/底部边距是可折叠的。

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

【讨论】:

  • 请注意,在某些特定情况下,垂直边距会塌陷——不仅仅是任何两个垂直边距都会塌陷。这只会让事情变得更加混乱(除非您非常熟悉盒子模型)。
【解决方案3】:

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


内边距应用于元素的内部,从而影响元素内容与边框的距离。

此外,使用边距不会影响元素的尺寸,而填充会使元素尺寸(设置高度 + 填充),例如,如果您有一个 100x100 像素的 div 和 5 像素的填充,那么您的 div 实际上是 105x105 像素

【讨论】:

  • 我相信每个边都有填充,所以元素应该是 110x110px
  • Ehm,如果元素的宽度设置为 auto 以外的任何值,则 afaik 填充不会更改元素的宽度。如果宽度为auto,则额外的填充将相应地增加填充元素的宽度(并且从两侧,如@2013Asker 所述)
  • 我认为说你的 div 将是 110px x 110px 有点误导,因为你的 div 的宽度仍然是 100px(假设 box-sizing 设置为 content-box)。
【解决方案4】:

记住这3点:

  • 边距是控件周围的额外空间。
  • Padding 是控件内部的额外空间。
  • 外部控件的 Padding 是内部控件的 Margin

演示图片:(红色框是欲望控制)

【讨论】:

  • 这并不能解释为什么知道区别很重要。
【解决方案5】:

最简单的定义是 ; padding 是在容器元素的边界内给定的空间,而在外部给出边距。 对于不是容器的元素,填充可能没有多大意义,但边距将有助于安排它。

【讨论】:

    【解决方案6】:

    Padding 是 inside 边框的空格,而 Margin 是空格 outside 边框。

    【讨论】:

      【解决方案7】:

      填充

      Padding 是一个 CSS 属性,用于定义元素内容与其边框(如果它有边框)之间的空间。如果元素周围有边框,则 padding 将为出现在该边框中的元素内容从该边框留出空间。如果一个元素周围没有边框,那么添加填充对该元素完全没有影响,因为没有边框可以提供空间。

      保证金

      Margin 是一个 CSS 属性,它定义了一个元素的外部到其下一个外部元素的空间。

      边距影响有或没有边框的元素。如果一个元素有边框,margin 定义了从这个边框到下一个外部元素的空间。如果元素没有边框,则 margin 定义从元素内容到下一个外部元素的空间。

      填充和边距的区别

      所以margin和padding的区别在于,padding处理的是内部空间,margin处理的是外部空间到下一个外部元素。

      【讨论】:

      • 哪些元素没有边框?
      【解决方案8】:

      任何答案都没有提到边距和填充之间的主要区别之一:可点击性和悬停检测

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

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

      【讨论】:

      • 大多数最重要的答案是指填充在元素的“内部”而边距在元素的“外部”,这已经意味着填充有助于更大的点击区域。但是,当您处理一个完全透明的盒子时,这并不那么明显......
      【解决方案9】:

      很高兴了解marginpadding 之间的区别。据我所知:

      • 边距是元素的外部空间,而填充是元素的内部空间。换句话说,margin 是元素边界之外的空间,而 padding 是其边界内的空间。
      • 您可以将auto 值设置为边距。但是,它不允许用于填充。 See this
        注意: 使用margin: auto 将块元素在其父元素内水平居中。此外,可以通过将 margin 设置为 auto 来使 flexbox 中的元素垂直或水平或两者居中。 See this
      • 边距可以是任何浮点数,但填充不能为负数。
      • 当你设置一个元素的样式时,填充也会被设置;但不是保证金。 Margin 获取父元素的样式。例如,当您将background-color 属性设置为黑色时,其内部空间(即填充)将为黑色,但其外部空间(即边距)不会。

      【讨论】:

        【解决方案10】:

        margin = 从边框向外的元素周围(外部)的空间。

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

        请看这里:http://jsfiddle.net/robx/GaMpq/

        【讨论】:

          【解决方案11】:

          Margin 是框外的空间; padding 是框内的空间。使用白色填充很难看出差异,但使用彩色填充可以很好地看到。

          【讨论】:

            【解决方案12】:

            边距和内边距实际上都是内边距的类型......一个(边距)位于元素边界之外,以使其与其他元素保持距离,另一个(内边距)位于元素内容之外,以使内容与元素边框。

            【讨论】:

              【解决方案13】:

              填充允许开发者在文本和它的封闭元素之间保持空间。边距是元素与父 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>
              

              【讨论】:

                【解决方案14】:

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

                Margin 值可以是以下类型。

                首先,auto 允许浏览器计算边距。此外,length 表示以 px、pt 或 cm 为单位的边距,而 % 有助于将边距描述为相对于包含元素宽度的百分比。最后,inherit 表示边距必须从父元素继承。

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

                Padding 值可以是以下类型。

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

                 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>

                边距和内边距的区别

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

                价值观 此外,margin的值可以是auto、length、%或inherit,而padding的值可以是length、%或inherit type。因此,这是 margin 和 padding 之间的另一个区别。

                简而言之,ma​​rgin 和 padding 是 CSS 中允许设置网页样式的两个属性。不能为这些属性分配负值。边距和内边距的主要区别在于边距有助于在边框外的元素周围创建空间,而内边距有助于在边框内的元素周围创建空间。

                【讨论】:

                  【解决方案15】:

                  自解释图像

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

                  【讨论】:

                    【解决方案16】:

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

                    【讨论】:

                      【解决方案17】:

                      尝试在具有宽度和高度的块 div 上放置背景颜色。您会看到 padding 增加了元素的大小,而 margin 只是在文档流中移动它。

                      边距专门用于移动元素。

                      【讨论】:

                        【解决方案18】:

                        Padding 是网页上最近组件之间的间距,而 margin 是网页边缘的间距。

                        【讨论】:

                          【解决方案19】:

                          我对margin和padding的理解来自google的开发者工具,附图中

                          简单来说,margin 是元素周围的空间,而 padding 是指元素和元素内部内容之间的空间。 这两者都用于制造差距,但方式不同。

                          使用保证金制造差距:

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

                          使用 Padding 创建间隙:

                          使用填充来创建间隙要么增大元素的大小,要么缩小内部的内容

                          为什么知道区别很重要?

                          了解它们的区别很重要,这样您就可以知道何时使用它们并适当地使用它们。

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

                          【讨论】:

                            【解决方案20】:

                            有一个重要的区别:

                            Margin- 位于元素的外部,即在元素开始“之后”应用空格移位。 Padding- 位于内部,另一个将在元素开始“之前”应用空格。

                            【讨论】:

                              【解决方案21】:

                              边距应用于您元素的外部,因此会影响您的元素与其他元素的距离。

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

                              此外,使用边距不会影响元素的尺寸,而内边距会使元素尺寸(设置高度 + 内边距),例如,如果您有一个 100x100 像素的 div,内边距为 5 像素,那么您的 div 实际上是 105x105 像素

                              【讨论】:

                              • 你注意到这个答案已经给出了吗? - 并添加适当的重点?
                              【解决方案22】:

                              基本上,内边距和边距的区别在于背景。填充将决定内容之间的空间,而边距决定元素的外边缘!

                              【讨论】:

                                【解决方案23】:

                                我刚刚注意到的一件事,但没有提到上述答案。如果我有一个动态创建的 DOM 元素,它使用空的内部 html 内容进行初始化,如果您不希望这个空元素占用除创建其内容之外的任何空间,那么使用边距而不是填充是一个好习惯。

                                【讨论】:

                                  【解决方案24】:

                                  填充是您的内容和边框之间的空间。其中 Margin 是 边框和其他元素之间的空间。

                                  【讨论】:

                                  • 边距不是那么简单,这并不能说明十几个以前的答案还没有说的。
                                  • 你只是重复了之前的答案。