顶&Left vs margin-top &左边距 [英] Top & Left vs margin-top & margin-left

问题描述

使用 top 和 left 属性与 top 和 left margin 有什么区别?

What is the difference between using top and left properties and top and left margins?

我知道 top 和 left 通常用于位置:绝对情况，但我仍然想知道是否有任何重大区别.

I know top and left are usually used in position:absolute situation but I'm still wondering if there is any major difference.

例如:

position:absolute;
top:5px;
left:5px;

-vs-

margin-top:5px;
margin-left:5px;

推荐答案

嗯，主要区别在于绝对定位的元素被从内容流中拉出来.

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.

这篇关于顶&Left vs margin-top &左边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！