边距和填充的区别?

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

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

边框=元素边框外的空间。

Padding =元素(内部)从文本到边框的空格。

参见这里:http://jsfiddle.net/robx/GaMpq/

小开

保证金是方框外的空格;填充是盒子内的空格。用白色填充很难看出区别，但用彩色填充可以很好地看到。

小开

padding是内容和border之间的空间，而margin是边界之外的空间。这是我从谷歌快速搜索中找到的一张图片，它说明了这个想法。

enter image description here

小开

试着在一个有宽有高的div块上添加一个背景色。您将看到填充增加了元素的大小，而边距只是在文档流中移动元素。

边距是专门用来移动元素的。

小开

Margin应用于元素的外，从而影响元素与其他元素的距离。

Padding应用于元素的内部，因此影响元素内容与边框的距离。

此外，使用边距不会影响元素的尺寸，而填充会使元素的尺寸(设置高度+填充)，例如，如果你有一个100x100px的div和5px的填充，你的div实际上将是105x105px

小开

有一个重要的区别:

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

小开

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

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

此外，使用边距不会影响元素的尺寸，而填充会使元素的尺寸(设置高度+填充)，例如，如果你有一个100x100px的div，填充5px，你的div实际上将是105x105px

小开

边距和填充都是填充的类型....一个(margin)在元素边框之外，使其与其他元素保持距离，另一个(padding)在元素内容之外，使内容与元素边框保持距离。

小开

这里的答案中漏掉了一个关键的东西:

上下页边距是可折叠的。

所以如果你在一个元素的底部有一个20px的边距，在下一个元素的顶部有一个30px的边距，两个元素之间的边距将是30px而不是50px。这不适用于左/右边距或填充。

小开

记住这三点:

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

Demo图片:(红框为欲望控制) enter image description here < / p >

小开

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

小开

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

小开

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

Padding是边界的空格内部，而Margin是边界的空格外。

小开

填充

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

保证金

Margin是一个CSS属性，用于定义元素外部到下一个外部元素的间距。

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

Padding和Margin的区别

所以边距和填充的区别在于填充处理内部空间，而边距处理下一个外部元素的外部空间。

小开

填充是内容和边框之间的空间。其中，Margin是的 border和另一个元素之间的空格。

小开

空白和填充之间的一个关键区别在任何答案中都没有提到:点击性和悬停检测

增加填充会增加元素的有效大小。有时我有一个很小的图标，我不想让它看起来更大，但用户仍然需要与该图标进行交互。我增加了图标的填充，让点击和悬停的足迹更大。增加图标的边距不会有同样的效果。

一个答案对另一个问题就这个话题给出了一个例子。

小开

了解margin和padding之间的区别是很好的。据我所知:

  • Margin是元素的外太空, padding是元素的的内心世界。换句话说，margin是元素边框外的空间，而padding是元素边框内的空间。
  • 你可以将auto的值设置为margin。但是，填充是不允许的。看到这个。
    使用margin: auto将块元素置于其父元素的水平居中。此外，还可以将flexbox中的元素垂直居中或水平居中，或两者都居中，通过将margin设置为auto。看到这个。
  • 边距可以是任何浮点数，但填充不能为负。
  • 当你设置一个元素样式时，padding也会被设置;但不是边际。Margin获取父元素的样式。例如，当你将background-color属性设置为黑色时，它的内部空间(即填充)将是黑色的，但它的外部空间(即边距)不是黑色的。
小开

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

保证金值可以是以下类型。

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

填充是CSS中的一个属性，它帮助在边界内的元素周围创建空间。程序员可以设置上、右、下和左的填充。换句话说，他可以使用padding-top、padding-right、padding-bottom和padding-left来设置这些值。

填充值可以是以下类型。

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

 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>

边距和填充之间的区别

保证金是一个CSS属性，用于在已定义边框外的元素周围创建空格，而填充是一个CSS属性，用于在已定义边框内的元素周围创建空格。因此，这解释了边距和填充之间的主要区别。

< >强值 此外，margin的值可以是auto、length、%或inherit，而padding的值可以是length、%或inherit type。因此，这是margin和padding的另一个区别

简而言之，边距和填充是CSS中的两个属性，允许对网页进行样式化。不可能为这些属性赋负值。边距和填充之间的主要区别在于边距有助于在边框外的元素周围创建空间，而填充有助于在边框内的元素周围创建空间。

小开

我刚刚注意到一件事，但上面的答案都没有提到。如果我有一个动态创建的DOM元素，它是用空的内部html内容初始化的，如果你不希望这个空元素占用任何空间，除了它的内容被创建之外，使用边框而不是填充是一个很好的实践。

小开

我对空白和填充物的理解来自于谷歌的开发人员工具，附件__abc0

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

使用Margin创建间隙:

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

使用Padding创建间隙:

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

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

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

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

小开

自我说明图像

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

enter image description here

小开

计算内容和边框之间的填充。 __abc0

小开

你可以看看这个链接，你可以看到在CSS中padding和margin是如何工作的。 enter image description here https://raw.githack.com/sushantbramhacharya/WebTechnology_LEC/main/margin/index.html < / p >


提交答案