为什么不使用边距定位而使用"position:relative top 5px"?

Question

基本上就是标题。我一直在使用边距定位而不是像position: relative这样的东西来完成我的工作，只是因为我不知道你可以用那种方式来控制它。

margin应该做什么，为什么我应该使用position，当margin可以完成任务时呢？

- user2288945

---

谁说你必须使用位置呢？而且，对于静态定位的元素，top会被忽略，所以我不确定你的前提是否正确。 - harpo

Answer 1

简而言之，margin会在元素的框周围添加空间，并修改在页面流中为其保留的空间量以匹配。所以顶部margin会将块向下移动，同时也会将其后面的所有内容向下移动。底部margin会将其后面的内容往下移动，同时将块本身保持在原地。这非常直观，可能正是你期望的行为。

相对定位会产生一些奇怪的效果：它改变了一个块的绘制位置，但不改变为其保留的空间位置。因此，如果您使用相对定位并设置top为10px，则一个框将向下移动10px - 但是其后面的内容不会移动。这可能会导致一个框与其后面的内容重叠。

如果您真的想要一种奇怪的效果（并看到相对定位的实际效果），请将float: left和relative positioning同时应用于一个小块。该块将被移动，但为其保留的区域将保持在其原始位置。

我为您做了一个例子：

<div style="position: relative; left: -100px; width: 100px; height: 100px; float: left;">
</div> (lorem ipsum text)

Fiddle

- Richard Connamacher

Answer 2

首先，静态定位会忽略 top 值，所以我认为您的问题有点混淆。如果您想询问的是相对定位（position:relative），那么以下答案将解决您的疑问。

通常，我认为使用边距和填充来相对定位元素比使用相对定位更好（因为静态定位会忽略 top 值）。相对定位或负边距可能会导致重叠的对象，这很少是我想要的，并且可能会导致某些事件路由、边框、背景等问题，除非这不是您明确想要的。我会使用 position:relative 作为子元素的容器，而几乎不会仅仅使用它来移动一个元素，因为边框和填充几乎总是更清晰的选择。

关于你问题中额外的部分，关于margin是什么，你可能需要进行一些搜索和阅读，一些图表可能会帮助你更好地理解。Margin是对象周围的一组外部像素。边框在margin内部。内部填充是内容。因此，margin是对象周围在边框之外的像素数，而padding是边框和对象内容之间的像素数。

如果未指定边框，则margin和padding提供非常相似的效果，除了相邻对象的margin有时会合并（例如组合成单个margin），但padding从不以这种方式合并，并且背景扩展到边框，但不包括margin。

这里有一个关于margin vs padding的StackOverflow问题/答案，提供了一些其他有用的参考资料：When to use margin vs padding in CSS 这是一篇关于CSS盒模型的好文章，涵盖了margin和padding。article

- jfriend00

---

谢谢，您的回答完美地回答了我的问题。 - user2288945

@user2288945 - 我在关于边距和内边距的回答中又添加了一点内容。 - jfriend00

Answer 3

使用这个小技巧：

a) 查看 HTML5 的文档类型

b) 重置隐藏的边距：

星号{ margin: 0; padding: 0;}

- FabianoDR

---

这似乎与所问的问题无关。 - Quentin