CSS Positioning 和 CSS Margin 的区别答案

【问题标题】：Difference between CSS Positioning and CSS MarginCSS Positioning 和 CSS Margin 的区别
【发布时间】：2022-05-03 01:45:18
【问题描述】：

今天我学习了两个 CSS 的概念，一个是 CSS 定位（静态、相对、绝对、固定），另一个是 CSS Margin，它定义了元素之间的空间。

假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎都可以做同样的事情。一个例子可能如下：

代码（CSS定位）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haha</title>

        <style type="text/css">
            //Using CSS positioning
            h2{position:relative;top:-80px}
        </style>
    </head>

    <body>
        <h1>hahahaha</h1>
        <h2>hehehehe</h2>
    </body>
</html>

代码（CSS 边距）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haha</title>

        <style type="text/css">
            //Using CSS Margin
            h2{margin-top:-80px}
        </style>
    </head>

    <body>
        <h1>hahahaha</h1>
        <h2>hehehehe</h2>
    </body>
</html>

问题：

1.) 如您所见，上面的 2 个代码通过将第二个标题移动到第一个标题的顶部来完成相同的操作。所以我只是想知道哪种方法实际上是排列元素的正确方法？

【问题讨论】：

标签： css css-position margin

【解决方案1】：

不，它们不一样，使用position: relative; 将元素保留在流中，它只是移动元素position，但在物理上它保留了流中的空间，而使用margin 它移动了影响元素的整个元素围绕使用margin 移动的那个，在某些情况下也会导致边距折叠...

Demo (position: relative;)

Demo（与margin）

CSS 定位如何工作？几分钟前我刚刚解释了here

另外，margin 和定位是完全不同的两个东西，定位是一个很大的概念，而margin 完全不同，定位不会影响你的盒子模型，而margin 会使用边距给元素留出空间，比如inline-block元素，或者说你需要在段落上方和下方留一些空间，它们并不意味着position元素等等......

如果你看到这个

边距占据元素周围的区域，即如果一个元素是50px in width 并且您使用10px 中的margin，则它在所有方面都占用10px，因此它实际上会使您的元素占据总共向上70px，50px => width + 10px => left margin + 10px => right margin，其中使用position，它不会扩大或减少元素周围的区域，它只是改变元素的position，这可能会或可能不会影响其他元素页面依赖于position 而margin 改变了盒子模型，因此，它也会影响其他元素的position，例如static 和relative。

此外，margin 不会垂直应用于 inline 元素，因此如果将margin 应用于span 或任何其他inline 元素，比如a，margin 将仅水平应用而不是垂直的，为此，您必须将它们设为inline-block 或block 级别元素。

欲了解更多信息，you can read my answer on another question。而您可以将position: relative; 应用于任何元素，无论block、inline 或inline-block，它都会以您想要的方式position 元素...

【讨论】：

那么如果我使用 position:absolute 会怎样？它会产生和 margin 一样的效果吗？
@caramel1995 不，position: absolute; 与边距无关，请阅读我已链接到的其他答案，好好阅读，相信您会理解所有职位:)

【解决方案2】：

在 css 中边距是边框外的空间。它将一个块与其他块分开。但是与填充的一个很大区别是边距不包括背景。换句话说，css positiong和css margin之间的区别是，不，它们使用postion ;relative;将元素保留在流中，它只是移动元素的位置，但在物理上它保留了流中的空间。

【讨论】：

【解决方案3】：

有四种类型的 CSS 定位

静态：这是每个页面元素的默认设置。不同的元素没有不同的定位结果。
相对：这种类型的定位可能是最令人困惑和滥用的。
absolute：这是一种非常强大的定位类型，可让您将任何页面元素准确地放置在您想要的位置。
已修复：这种定位类型相当少见，但肯定有用。

【讨论】：