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

问题描述

使用顶部和左侧属性与顶部和左侧边距有什么区别？

我知道顶部和左边通常用于位置：绝对情况，仍然想知道是否有任何重大差异。

例如：

  position：absolute; 
 top：5px; 
 left：5px; 
  

-vs -

  margin-top：5px; 
 margin-left：5px; 
  

解决方案

但是对于相对定位的元素，周围的内容可能变得模糊。

请参阅这个示例fiddle 有一些差异。

当然，有两种情况下提供相同的结果，但在正常条件下，这两个aproaches不能简单地交换或比较。

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;

解决方案

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.

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