CSS 定位和 CSS 边距之间的区别

2023-12-22

今天我学习了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边距）：

<!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 个代码通过将第二个标头移动到第一个标头的顶部来完成相同的操作。所以我只是想知道哪种方法实际上是排列元素的正确方法？

不，它们不一样，使用position: relative;保持元素在流动中，它只是移动元素position但在物理上它在使用时在流程中保留了空间margin它移动整个元素，影响使用移动的元素周围的元素margin，在某些情况下这也会导致边距崩溃......

Demo http://jsfiddle.net/He88F/ (position: relative;)

Demo http://jsfiddle.net/Eb3eZ/ (with margin)

CSS 定位如何工作？我刚刚解释过here https://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of/20718728#20718728几分钟前

Also, margin和定位完全是两个不同的东西，定位是一个很大的概念，margin完全不同，定位不会影响您的盒子模型，其中margin是的，边距用于分隔元素，例如inline-block元素，或者说您需要在段落上方和下方留出一些空间，它们并不意味着position元素等...

如果你看到这个

边距占据元素周围的区域，即如果元素是50px in width你用margin of 10px，它需要10px在所有方面，所以它实际上会让你的元素占据70px总共，50px => width + 10px => left margin + 10px => right margin，其中使用position，它不会扩大或缩小元素周围的区域，它只是改变position该元素可能会或可能不会影响页面上的其他元素，具体取决于position然而margin改变盒子模型，因此，它也会影响position其他元素，例如static and relative.

Also, margin不垂直应用于inline元素，这样如果您应用margin to span或任何其他inline元素说a, margin将仅水平拍摄而不是垂直拍摄，为此，您必须将它们制作为inline-block or block水平元素。

了解更多信息，你可以阅读我在另一个问题上的回答 https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element/11700999#11700999。而你可以申请position: relative;对于任何元素，无论block, inline or inline-block它会position元素按照您想要的方式...

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)