When to use margin vs padding in CSS
在编写CSS时，在决定何时使用
页边距位于块元素的外部，而填充位于内部。
- 使用页边距将块与外部对象分隔开
- 使用填充将内容移离块的边缘。
tl；dr：默认情况下，我在任何地方都使用边距，除非我有边框或背景，并且希望增加可见框内的空间。
对我来说，填充和边距最大的区别是垂直边距自动折叠，而填充则不会。
考虑两个元素，一个在另一个上面，用
所以您将以第一个元素的内容结束，接着是第一个元素的填充，接着是第二个元素的填充，最后是第二个元素的内容。
因此，这两个元素的内容最终将被分开。
现在用1em的空白代替这个空白。页边距被认为是元素的外部，相邻项的页边距将重叠。
因此，在本例中，您将以第一个元素的内容结尾，然后是合并页边距的
当你知道你想在一个元素周围说一个间隔的
另外两个大的区别是，填充包括在单击区域和背景颜色/图像中，但不包括边距。
我所看到的最好的解释就是用例子、图表，甚至是一个"自己动手"的视图。
我认为下面的图表可以立即直观地理解这种差异。
要记住的一件事是，标准兼容的浏览器(即怪癖是一个例外)只将内容部分呈现到给定的宽度，所以在布局计算中要跟踪这一点。同样要注意的是，border-box看到了一些反弹，bootstrap 3支持它。
对于您的问题，有更多的技术解释，但是如果您正在寻找一种方法来考虑边距和填充，这将帮助您选择何时以及如何使用它们，这可能会有所帮助。
将块元素与挂在墙上的图片进行比较：
- 浏览器窗口和墙一样。
- 内容就像一张照片。
- 页边空白就像有框图片之间的墙壁空间。
- 衬垫就像照片周围的垫子。
- 边框就像框架上的边框。
在决定页边距和填充之间的间距时，最好的经验法则是在与墙上其他内容相关的元素间距时使用页边距，在调整元素本身的外观时使用填充。页边距不会改变元素的大小，但填充通常会使元素变大1。
1可以使用
边距与填充：
页边距用于在元素中创建该元素与页面其他元素之间的距离。其中padding用于创建元素内容和边框之间的距离。
页边距不是元素的一部分，其中填充是元素的一部分。
请参阅下面从页边距与填充-css属性中提取的图像
这里有一些HTML演示了
1 2 3 4 5 6 7 8 9 | $(".outer").click(function(e) { console.log("outer"); e.stopPropagation(); }); $(".inner").click(function(e) { console.log("inner"); e.stopPropagation(); }); |
1 2 3 4 5 6 7 8 9 10 11 | .outer { padding: 10px; background: red; } .inner { margin: 10px; padding: 10px; background: blue; border: solid white 1px; } |
1 | <script src="http://code.jquery.com/jquery-latest.js"> |
关于页边距的问题是，您不需要担心元素的宽度。
就像当你给一个东西
因此，我通常首先使用填充来获取所有"EDOCX1"(1)，然后使用利润率进行细微的调整。
另一件需要注意的事情是，在不同的浏览器上，填充更加一致，IE不能很好地处理负利润。
边缘将清除元素周围的区域(在边框外)，但填充将清除元素内容周围的区域(在边框内)。
这意味着您的元素不知道它的外部页边距，所以如果您正在开发动态Web控件，我建议您尽可能使用填充与页边距。
注意，有时你必须使用保证金。
来自https://www.w3schools.com/css/cssu boxmodel.asp
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
实况示例(通过更改值进行游戏)：https://www.w3schools.com/css/tryit.asp？文件名=Trycss_-BoxModel
需要注意的一点是，当自动折叠页边距使您感到恼火(并且您没有在元素上使用背景色)时，使用填充更容易。
很高兴知道
边缘是元素的外部空间，而填充是元素的内部空间。
边距是元素边框外的空间，而填充是元素边框内的空间。
Margin接受auto的值：
margin: auto ，但不能将padding设置为auto。边距可以设置为任意数字，但填充必须为非负。
设置元素样式时，填充也会受到影响(例如背景色)，但不会影响边距。
解释了进阶边距与填充
使用
当使用
它应用于不能包含任何子元素(如输入元素)的内联元素。
您正在补偿一个非常复杂的浏览器bug，供应商*cooke*mozilla*cooke*拒绝修复该bug，并且确信(在某种程度上，您与w3c和whatwg编辑器进行定期交换)您必须有一个可工作的解决方案，并且此解决方案不会影响任何其他东西的样式，而不会影响您正在补偿的bug。
当你有一个100%宽度的元素与
因此，如果您不执行这两项操作之一，则不要向元素添加填充，而是向元素添加直接的子元素/子元素，以确保您能够在所有浏览器中获得预期的行为。
首先，让我们看看有什么区别，每个职责是什么：
1) Margin
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the
border. With CSS, you have full control over the margins. There are
CSS properties for setting the margin for each side of an element
(top, right, bottom, and left).
2) Padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of
an element. With CSS, you have full control over the padding. There
are CSS properties for setting the padding for each side of an element
(top, right, bottom, and left).
所以简单地说，页边空白是元素周围的空间，而填充是元素内容周围的空间。
这张来自编码人员的图片显示了边距和边框是如何连接在一起的，以及边框框和内容框是如何使其与众不同的。
此外，它们还将每个部分定义如下：
- Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
- Padding - this clears the main content from its containing box.
- Border - this surrounds both content and padding.
- Margin - this area defines a transparent space that separates it from other elements.
我总是使用这个原则：
这是firefox中inspect元素功能的box模型。它像洋葱一样工作：
- 你的内容在中间。
- 填充是内容和标签边缘之间的空间里面。
- 边界及其规格
- 边缘是标签周围的空间。
因此，较大的页边距会在包含内容的框周围留出更多空间。
较大的填充空间将增加内容和其所在框之间的空间。
如果设置为特定值，它们都不会增大或减小框的大小。
边缘
边缘通常用于在元素本身和其周围之间创建一个空间。
例如，我在构建导航栏时使用它，使其贴在屏幕边缘，并且没有空白。
衬垫当我在一个边界内有一个元素，
所以简单地说，这是情境性的，这取决于你想做什么。
边距在框外，填充在框内