16

标题,基本上。我一直在使用边距定位而不是类似的东西做很多工作position: relative,只是因为我不知道你可以这样控制它。

margin应该做什么,为什么我应该在完成工作position时使用?margin

4

3 回答 3

20

简而言之,边距在元素框周围添加空间,并修改页面流中为其保留的空间量以匹配。因此,上边距将一个块向下移动,同时也将其后面的所有内容向下移动。底部边距将跟随它的内容向下移动,同时将块本身留在同一位置。这非常直观,并且可能完全符合您的预期。

相对定位做了一些奇怪的事情:它改变了块的绘制位置,而不是为其保留的空间。因此,如果您使用相对定位并将 top 设置为 10px,则一个框将在页面下方移动 10px ——但它之后的内容不会移动。这可能会导致一个框与它后面的内容重叠。

如果您真的想要一个奇怪的效果(并查看实际的相对定位),请将 float: left 和 relative 定位应用于一个小块。该块将被移动,但为其保留的区域将保留在其原始位置。

我为你做了一个例子:

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

小提琴

于 2013-04-17T03:59:31.183 回答
12

首先,静态定位忽略了top价值,所以我认为你的问题有点困惑。如果您要问的是position:relative,那么这里有一个解决该问题的答案。

一般来说,我认为使用边距和填充来相对于它们的邻居而不是相对定位来定位元素要好得多(这是我假设你真正要问的,因为静态定位忽略了该top值)。

相对定位或负边距可能会导致重叠的对象,这很少是我想要的,并且可能导致事件路由、边框、背景等的一些问题......如果这不是你想要的。我把你position:relative当作一个容器来装孩子position: absolute,但几乎从来没有用它来单独移动一个元素,因为边框和填充几乎总是更干净。

至于你关于保证金做什么的问题的额外部分,你可能应该做一些搜索,然后阅读一些图表可能真的会帮助你想象这一点。边距是对象周围的一组外部像素。边距内是边框。边框内是内边距,内边距内是内容。因此,边距是边界外对象周围的像素数,而填充是边界与对象内容之间的像素数。

如果您没有指定边框,则边距和填充提供非常相似的效果,只是相邻对象的边距有时会折叠(例如合并为单个边距),但填充永远不会以这种方式组合,并且背景会延伸到边框,但不会低于边距。

这是关于边距与填充的 StackOverflow 问题/答案,它提供了一些其他有用的参考:When to use margin vs padding in CSS

这是一篇关于 CSS 盒子模型的好文章,它涵盖了边距和填充

于 2013-04-17T03:28:27.090 回答
0

使用这个技巧:

a) 查看 HTML5 的文档类型

b) 重置隐藏边距:

星号 { 边距:0;填充:0;}

于 2018-05-14T09:57:07.740 回答