CSS 定位和 CSS 边距的区别

Question

CSS 定位和 CSS 边距的区别

3

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

比方说我想移动一个元素，最好的方法是什么？因为这两个概念似乎都可以做到同样的事情。以下是一个示例：

代码（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 Margin)：

<!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.) 正如您所见，以上两个代码都将第二个标题移到了第一个标题的顶部。那么，我想知道在排列元素方面哪种方法才是正确的？

- caramel1995

4个回答

0

CSS的定位和边距都能用来移动网页元素。但是两者工作方式不同，用途也不同。CSS定位用于在网页上精确放置元素，而边距则用于定义元素周围的空间。

在您的示例中，使用CSS定位将第二个标题移到第一个标题上方是更合适的方法。这是因为CSS定位专门设计用于定位元素，并允许在页面上相对于其父元素或其他元素精确控制元素的位置。

另一方面，边距更适合定义元素之间的空间，而不是将元素定位在另一个元素上方。虽然可以使用负边距移动元素，但这通常不被视为最佳实践，因为它可能会导致不可预测的结果，特别是在响应式网页设计时。

一般来说，最好使用CSS定位来精确定位网页元素，并使用边距来定义元素之间的间距。但是，您选择的具体方法将取决于您的网页特定要求和试图实现的布局。

如果您想了解有关CSS定位的更多信息，我强烈推荐观看这个视频：https://youtu.be/arODwDNUUh8

- Kenneth Nnabuife

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

-1

CSS中的margin是指边框外的空间，它可以将一个区块与其他区块隔开。但与padding的一大区别是，margin不包括背景。换句话说，CSS定位和CSS边距之间的区别在于，它们并不相同。使用position：relative来定位元素，会让元素保持在流中，只是移动了元素的位置，但在流中仍然占用空间。

- yanchamlak tadege

-1

有四种CSS定位类型

静态：这是每个页面元素的默认值。不同的元素对于定位没有不同的结果。
相对：这种类型的定位可能是最令人困惑和误用的。
绝对：这是一种非常强大的定位类型，允许您将任何页面元素放置在您想要的位置。
固定：这种类型的定位相当罕见，但肯定有用。

- yanchamlak tadege

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

不，它们不同，使用“position: relative;”会保留元素的流动性，它只是移动了元素的“position”，但在物理上它仍然在流程中保留了空间，而使用“margin”则会移动整个元素，这会影响到使用“margin”移动的元素周围的元素，并且在某些情况下还会导致边距折叠...。 Demo（“position: relative;”） Demo（带有“margin”）

CSS定位是如何工作的？我刚刚在这里解释过。here

此外，margin和定位是完全不同的两个概念，定位是一个庞大的概念，而margin则完全不同，定位不会影响你的盒模型，而margin会，margin用于为元素留出空间，例如inline-block元素，或者说你需要在段落上下留出一些空间，它们不是用来position元素等等...

如果你看到这条消息

enter image description here

Margin指的是元素周围的区域，例如如果一个元素的宽度为50px，您使用了10px的margin，则会在所有边缘上占用10px，因此实际上它将占用总共70px，即50px => 宽度 + 10px => 左边距 + 10px => 右边距。而使用position时，它不会扩展或缩小元素周围的区域，它只会改变元素的位置，这可能会影响页面上的其他元素，具体取决于位置，而margin会改变盒模型，因此也会影响static和relative等其他元素的位置。

此外，对于inline元素，margin不会垂直应用。因此，如果您对span或任何其他inline元素（如a）应用margin，则margin仅在水平方向上生效，而不是垂直方向上生效。为了解决这个问题，您需要将它们转换为inline-block或block级别的元素。

更多信息，请参见我的另一个回答。无论是block、inline还是inline-block元素，您都可以将position: relative;应用于任何元素，以使其按您想要的方式定位...