位置和边距之间的差异[重复]答案

【问题标题】：Difference between position and margin [duplicate]位置和边距之间的差异[重复]
【发布时间】：2014-04-05 22:18:24
【问题描述】：

有什么区别

position : relative;
bottom : 10px;

还有：

margin-top: -10px;

在我看来它们是一样的，不是吗？

【问题讨论】：

标签： css

【解决方案1】：

没有；如果你给position: relative 一个东西并把它拉上 10 个像素，它会移动，但会继续占据（就其框而言）它之前占据的 10 个像素。

如果你给 margin 一个东西并将其拉高 10 像素，它会向上移动并将其下方的所有内容也一起带入。

【讨论】：

【解决方案2】：

当您使用position:relative 时，它将元素定位在文档流中的正常位置，然后将其移动到偏移位置。它最初占用的空间在布局中保留（留空）。

Margins 但是不是定位属性，实际上它是用于在页面上创建块框的框模型的一部分。它是一个元素的边界边缘与下一个相邻元素的边界边缘之间存在的空间。

【讨论】：

【解决方案3】：

边距是元素框的边缘和整个框的边缘之间的空间，例如字母的边距。

position 属性指定用于元素的定位方法的类型（静态、相对、绝对或固定）。

在您的第一种情况下，您有一个相对定位的元素。对于相对定位的元素，bottom 属性将元素的底部边缘设置为高于/低于其正常位置的单位。

您的第二种情况完全包括设置 margin-top 来更改元素的“边界框”。

【讨论】：

【解决方案4】：

如果你使用位置，元素出现在距离顶部 10px 处。如果使用边距，元素会从顶部“推动”自身，在其周围添加空间。

我会加图解释

灰黑框显示您的 div。图片前半部分显示位置，后半部分显示margin，其中黄色部分为margin。

【讨论】：

【解决方案5】：

嗯，这取决于你的结构。第一个会将元素向上移动 10px，第二个会将元素从父元素的底部移动 10px。

要查看差异，请尝试使用比外部元素小得多的内部元素。就像 500px 元素内的 100px 高度应该给你清晰的画面。

让我知道你的想法。

【讨论】：