在CSS中，边距和填充到底有什么区别?它似乎真的没有多大用处。你能给我举个例子说明区别在哪里(以及为什么知道区别很重要)吗?
当前回答
边距应用于元素的外部，从而影响元素与其他元素的距离。
填充应用于元素内部，因此影响元素内容与边框的距离。
此外，使用边距不会影响元素的尺寸，而填充会使元素的尺寸(设置高度+填充)，例如，如果你有一个100x100px的div和5px的填充，你的div实际上将是105x105px
其他回答
填充是在内容和边框之间计算的。 保证金是在边界外计算的。
有一个重要的区别:
边距——位于元素的外部，即在元素开始后应用空格移位。 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>
这里的答案中漏掉了一个关键的东西:
上下页边距是可折叠的。
所以如果你在一个元素的底部有一个20px的边距，在下一个元素的顶部有一个30px的边距，两个元素之间的边距将是30px而不是50px。这不适用于左/右边距或填充。
记住这三点:
边距是控件周围的额外空间。 填充是控件内部的额外空间。 外部控件的Padding是内部控件的Margin。
演示图片:(红框为欲望控制)
