标题，基本上。我一直在使用保证金定位而不是像position: relative之类的东西做很多工作，只是因为我不知道你可以这样控制它。
margin应该做什么，为什么position完成工作时我应该使用margin？
答案 0 :(得分：18)
简而言之，边距会在元素框周围添加空间，并修改页面流中为其匹配的空间量。因此，上边距会移动一个块，同时还会移动跟随它的所有内容。下边距移动跟随它的内容，同时将块本身留在同一位置。这非常直观，可能与你期望的完全一致。
相对定位确实有些奇怪：它会改变绘制块的位置，但不会为其保留的空间。因此，如果你使用相对定位并将顶部设置为10px，则一个框将在页面下移动10px - 但是后面的内容将不会移动。这可能会导致框与其后面的内容重叠。
如果你真的想要一种奇怪的效果（以及看到相对定位的效果），请将float：left和relative position同时应用于一个小块。该块将被移动，但为其保留的区域将保留在其原始位置。
我为你做了一个例子：
<div style="position: relative; left: -100px; width: 100px; height: 100px; float: left;">
</div> (lorem ipsum text)
<强> Fiddle
答案 1 :(得分：12)
首先，静态定位会忽略top值，所以我认为你的问题有点困惑。如果您要问的是position:relative，那么这是一个解决这个问题的答案。
一般来说，我认为使用边距和填充来定位元素相对于它们的邻居而不是相对定位要好得多（这是我假设你真正要求的，因为静态定位会忽略top值） 。
相对定位或负边距可能导致重叠的对象，这很少是我想要的，并且可能导致事件路由，边框，背景等的一些问题...如果这不是明确的你想要的。我position:relative作为position: absolute的孩子的容器，但几乎从不使用它来移动元素，因为边框和填充几乎总是更清洁。
至于你关于保证金做什么的问题的额外部分，你应该做一些搜索，然后一些阅读作为几个图表可能真的可以帮助你想象这一点。边距是对象周围的外部像素集。边缘内是边界。边框内部是填充，填充内部是内容。因此，边距是边框外的对象周围的像素数，填充是边框与对象内容之间的像素数。
如果没有指定边框，边距和填充提供非常相似的效果，除了相邻对象的边距有时会折叠（例如合并为单个边距），但填充从不以这种方式组合，背景延伸到边框，但不在保证金之下。
这是关于边距与填充的StackOverflow问题/答案，它提供了一些其他有用的参考：When to use margin vs padding in CSS
这是关于CSS框模型的一个很好的article，它涵盖了边距和填充
答案 2 :(得分：0)
使用这个技巧：
a）查看HTML5的doctype
b）重置隐藏边距：
星号{margin：0;填充：0;}