顶部&左与上边距和上边距左边距
使用 top 和 left 属性以及上边距和左边距有什么区别？
我知道顶部和左侧通常用于位置：绝对的情况，但我仍然想知道是否有任何重大区别。
例如：
position:absolute;
top:5px;
left:5px;
-vs-
margin-top:5px;
margin-left:5px;
What is the difference between using top and left properties and top and left margins?
I know top and left are usually used in position:absolute situation but I'm still wondering if there is any major difference.
ex:
position:absolute;
top:5px;
left:5px;
-vs-
margin-top:5px;
margin-left:5px;
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
嗯，主要区别在于绝对定位的元素被从内容流中拉出。
但对于相对定位的元素，周围的内容可能会变得混乱。
另一方面，边距会添加到元素的大小中，而周围的内容也会相应地流动。
请参阅此示例小提琴，其中存在一些差异。
当然，在某些情况下，两者会产生相同的结果，但在正常情况下，这两种方法不能简单地互换或比较。
Well, the main difference is that absolutely positioned elements are pulled out of the content flow.
But also with relatively positioned elements, the surrounding content may become obfuscated.
Margins on the other hand are added to the element's size while the surrounding content flows accordingly.
See this sample fiddle with some differences.
Surely there are situations where both deliver the same results, but under normal conditions, these two aproaches aren't simply exchangeable nor comparable.
A存在语义差异。像
top这样的框偏移指定框的边距边缘（下图中的虚线边缘）与参考边缘（对于绝对定位的元素，即框包含块的顶部边缘）的偏移距离。margin-top等边距属性指定框的边距区域的宽度（下图中虚线边缘和实线边缘之间的距离TM）。B
顶部和左侧仅适用于定位元素（将position设置为static以外的任何内容的元素），而margin-top和margin-left< /code> 适用于除表格显示类型以外的元素之外的所有元素表格标题、表格和内联表格。A There's a semantic difference. Box offsets like
topspecify how far a box's margin edge (dotted edges in the image below) is offset from a reference edge (For absolutely positioned elements, that's the top edge of the box's containing block). Margin properties likemargin-topspecify the width of the margin area of a box (The distanceTMbetween the dotted edge and and solid edge in the image below).B
topandleftapply only to positioned elements (elements withpositionset to anything other thanstatic) whilemargin-topandmargin-leftapply to all elements except elements with table display types other than table-caption, table and inline-table.边距描述了您的盒子和相邻盒子之间的空间。相对定位的框（即，作为正常流的一部分）将在它们之间保持足够的空间，以满足每个框的“边距”要求（称为“边距折叠”）。
另一方面，
top和left是位置属性，指定您的框所在的位置；对于绝对定位的框，值是相对于最近的包含框本身绝对定位的。上/左/下/右属性指定框各自边缘的位置，包括其边距。简而言之，两者是完全不同的概念。对于正常流动的盒子，您应该使用
margin来控制相邻盒子之间的间距。Margin describes the space between your box and adjacent boxes. Boxes that are positioned relatively (i.e. that are part of the normal flow) will keep the sufficient space between them that each one's "margin" requirements are met (called "margin collapsing").
topandlefton the other hand are positional attributes that specify where your box is located; for absolutely positioned boxes the values are taken relative to the nearest containing box which is itself absolutely positioned. The top/left/bottom/right attributes specify the location of the respective edge of your box including its margin.In short, the two are entirely different concepts. For normally flowed boxes you should use
marginto control the spacing between neighbouring boxes.