边距和填充的区别?

在CSS中，边距和填充到底有什么区别?它似乎真的没有多大用处。你能给我举个例子说明区别在哪里(以及为什么知道区别很重要)吗?

当前回答

记住这三点:

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

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

2013-12-24 05:27:13

其他回答

Padding是网页上最接近的组件之间的空间，margin是网页边缘的空间。

2014-01-15 05:48:16

最简单的定义是; Padding是容器元素边界内的一个空格，margin是容器元素边界外的一个空格。对于不是容器的元素，填充可能没有多大意义，但空白可以帮助排列它。

2010-06-17 12:53:43

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

2014-07-27 06:27:23

我对边距和填充的理解来自于谷歌的开发人员工具，如图所示

简单来说，边距是指元素周围的空间，padding指元素和元素内内容之间的空间。这两种方法都用来制造间隙，但方式不同。

使用Margin创建间隙:

在创建间隙时，边缘将相邻的元素推开

使用Padding创建间隙:

使用填充来创建间隙既可以增加元素的大小，也可以缩小其中的内容

为什么知道两者的区别很重要?

了解它们的区别是很重要的，这样你就可以知道什么时候使用它们，并适当地使用它们。

同样值得注意的是，在设计网站布局时，页边距和填充很方便，因为页边距指定了一个元素是向上还是向下，向左还是向右移动，而填充指定了一个元素在容器内的外观和位置。

2020-08-05 09:04:23

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