边距和填充之间的区别？
Posted
技术标签:
【中文标题】边距和填充之间的区别？【英文标题】：Difference between margin and padding? 【发布时间】：2011-03-04 21:05:33 【问题描述】：margin 和 padding 在 CSS 中到底有什么区别？它似乎真的没有多大用处。您能否举例说明差异所在（以及为什么了解差异很重要）？
【问题讨论】：
***.com/questions/2189452/… ***.com/questions/3060456/… ***.com/questions/4619899/… 搜索padding vs margin 的前三个链接。我认为我们需要在搜索栏中添加箭头并使其变为绿色。
这可能会帮助您了解区别digizol.com/2006/12/margin-vs-padding-css-properties.html
另请注意，Internet Explorer 对边距/边框/填充宽度求和的方式与几乎所有其他浏览器不同（在默认的非怪癖模式下）。
如果边距不起作用，请尝试填充
【参考方案1】：
最简单的定义是 ; padding 是在容器元素的边界内给定的空间，而在外部给出边距。 对于不是容器的元素，填充可能没有多大意义，但边距将有助于安排它。
【讨论】：
【参考方案2】：margin = 从边框向外的元素周围（外部）的空间。
padding = 元素周围（内部）从文本到边框的空间。
请看这里：http://jsfiddle.net/robx/GaMpq/
【讨论】：
【参考方案3】：Margin 是框外的空间； padding 是框内的空间。使用白色填充很难看出差异，但使用彩色填充可以很好地看到。
【讨论】：
【参考方案4】：padding 是内容和border 之间的空间，而margin 是边界外的空间。这是我通过 Google 快速搜索找到的一张图片，说明了这个想法。
【讨论】：
还可以查看这些网站的定义。但图形是一个完美的例证。 w3schools.com/css/css_margin.aspw3schools.com/css/css_padding.asp @maclunian：除了上面的@Suroot 链接之外，还请查看此站点w3schools.com/css/css_boxmodel.asp。 这与内容的设置宽度和高度有什么关系？这一切的衡量标准在哪里？【参考方案5】：尝试在具有宽度和高度的块 div 上放置背景颜色。您会看到 padding 增加了元素的大小，而 margin 只是在文档流中移动它。
边距专门用于移动元素。
【讨论】：
【参考方案6】：边距应用于元素的外部，从而影响元素与其他元素的距离。
内边距应用于元素的内部，从而影响元素内容与边框的距离。
此外，使用边距不会影响元素的尺寸，而填充会使元素尺寸（设置高度 + 填充），例如，如果您有一个 100x100 像素的 div 和 5 像素的填充，那么您的 div 实际上是 105x105 像素
【讨论】：
我相信每个边都有填充，所以元素应该是 110x110px Ehm，如果元素的宽度设置为auto 以外的任何值，则 afaik 填充不会更改元素的宽度。如果宽度为auto，则额外的填充将相应地增加填充元素的宽度（并且从两侧，如@2013Asker 所述）
我认为说你的 div 将是 110px x 110px 有点误导，因为你的 div 的宽度仍然是 100px（假设 box-sizing 设置为 content-box）。【参考方案7】：
有一个重要的区别：
Margin- 位于元素的外部，即在元素开始“之后”应用空格移位。 Padding- 位于内部，另一个将在元素开始“之前”应用空格。
【讨论】：
【参考方案8】：边距应用于您元素的外部，因此会影响您的元素与其他元素的距离。
填充应用于元素的内部，从而影响元素的内容与边框的距离。
此外，使用边距不会影响元素的尺寸，而内边距会使元素尺寸（设置高度 + 内边距），例如，如果您有一个 100x100 像素的 div，内边距为 5 像素，那么您的 div 实际上是 105x105 像素
【讨论】：
你注意到这个答案已经给出了吗？ - 并添加适当的重点？【参考方案9】：边距和内边距实际上都是内边距的类型......一个（边距）位于元素边界之外，以使其与其他元素保持距离，另一个（内边距）位于元素内容之外，以使内容与元素边框。
【讨论】：
【参考方案10】：这里的答案中缺少的一个关键点：
顶部/底部边距是可折叠的。
因此，如果您在一个元素的底部有 20 像素的边距，而在下一个元素的顶部有 30 像素的边距，则两个元素之间的边距将是 30 像素而不是 50 像素。这不适用于左右边距或填充。
【讨论】：
请注意，在某些特定情况下，垂直边距会塌陷——不仅仅是任何两个垂直边距都会塌陷。这只会让事情变得更加混乱（除非您非常熟悉盒子模型）。【参考方案11】：记住这3点：
Margin 是控件周围的额外空间。 填充是控件内部的额外空间。 外部控件的 Padding 是内部控件的 Margin。演示图片：（红色框是欲望控制）
【讨论】：
这并没有回答为什么知道区别很重要。【参考方案12】：Padding 是网页上最近组件之间的间距，而 margin 是网页边缘的间距。
【讨论】：
【参考方案13】：基本上，内边距和边距的区别在于背景。填充将决定内容之间的空间，而边距决定元素的外边缘！
【讨论】：
【参考方案14】：填充允许开发者在文本和它的封闭元素之间保持空间。边距是元素与父 DOM 的另一个元素保持的空间。
查看示例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
<title>Pseudo Elements</title>
<style type="text/css">
bodyfont-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>
【讨论】：
【参考方案15】：Padding 是 inside 边框的空格，而 Margin 是空格 outside 边框。
【讨论】：
【参考方案16】：填充
Padding 是一个 CSS 属性，它定义了元素内容和它的边框（如果它有边框的话）之间的空间。如果元素周围有边框，则 padding 将为出现在该边框中的元素内容从该边框留出空间。如果一个元素周围没有边框，那么添加填充对该元素完全没有影响，因为没有边框可以提供空间。
保证金
Margin 是一个 CSS 属性，它定义了一个元素的外部到其下一个外部元素的空间。
边距影响有或没有边框的元素。如果一个元素有边框，margin 定义从这个边框到下一个外部元素的空间。如果元素没有边框，则 margin 定义从元素内容到下一个外部元素的空间。
填充和边距的区别
所以margin和padding的区别在于，padding处理的是内部空间，而margin处理的是外部空间到下一个外部元素。
【讨论】：
哪些元素没有边框？【参考方案17】：填充是内容和边框之间的空间。其中 Margin 是 边框和其他元素之间的空间。
【讨论】：
边距不是那么简单，这并不能说明十几个以前的答案还没有说的。 你只是重复了之前的答案。【参考方案18】：任何答案都没有提到边距和填充之间的主要区别之一：可点击性和悬停检测
增加内边距会增加元素的有效大小。有时我有一个小图标，我不想让它明显变大，但用户仍然需要与该图标交互。我增加了图标的填充，为点击和悬停提供更大的空间。增加图标的边距不会有同样的效果。
An answer给另一个关于这个话题的问题举了一个例子。
【讨论】：
大多数最重要的答案是指填充在元素的“内部”而边距在元素的“外部”，这已经意味着填充有助于更大的点击区域。但是，当您处理一个完全透明的盒子时，这并不那么明显......【参考方案19】：很高兴了解margin 和padding 之间的区别。据我所知：
auto 值设置为边距。但是，它不允许用于填充。 See this。
注意： 使用margin: auto 将块元素在其父元素内水平居中。此外，可以通过将 margin 设置为 auto 来使 flexbox 中的元素垂直或水平或两者居中。 See this。
边距可以是任何浮点数，但填充不能为负数。
当你设置一个元素的样式时，填充也会被设置；但不是保证金。 Margin 获取父元素的样式。例如，当您将background-color 属性设置为黑色时，其内部空间（即填充）将为黑色，但其外部空间（即边距）不会。
【讨论】：
【参考方案20】：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 之间的另一个区别。
简而言之，margin 和 padding 是 CSS 中允许设置网页样式的两个属性。不能为这些属性分配负值。边距和内边距的主要区别在于边距有助于在边框外的元素周围创建空间，而内边距有助于在边框内的元素周围创建空间。
【讨论】：
【参考方案21】：我刚刚注意到的一件事，但没有提到上述答案。如果我有一个动态创建的 DOM 元素，它使用空的内部 html 内容进行初始化，如果您不希望这个空元素占用除创建其内容之外的任何空间，那么使用边距而不是填充是一个好习惯。
【讨论】：
【参考方案22】：我对margin和padding的理解来自google的开发者工具，附图中
简单来说，margin 是元素周围的空间，而 padding 是指元素和元素内部内容之间的空间。 这两者都用于制造差距，但方式不同。
使用保证金制造差距：
在创建间隙边距时将相邻元素推开
使用 Padding 创建间隙：
使用填充来创建间隙要么增大元素的大小，要么缩小内部的内容
为什么知道区别很重要？
了解它们的区别很重要，这样您就可以知道何时使用它们并适当地使用它们。
同样值得注意的是，在设计网站布局时，边距和内边距会派上用场，因为边距指定元素是向上还是向下、向左或向右移动，而内边距指定元素在其容器中的外观和位置。
【讨论】：
【参考方案23】：自解释图像
L - Left, R- Right and T - Top, B - Bottom
【讨论】：
【参考方案24】：填充是在内容和边框之间计算的。 边距在边界外计算。
【讨论】：
以上是关于边距和填充之间的区别？的主要内容，如果未能解决你的问题，请参考以下文章