顶级&左边vs边缘顶部&利润率左 [英] Top & Left vs margin-top & margin-left

问题描述

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

ex：

 位置：绝对; 
顶部：5px; 
 left：5px; 
  

-vs -

 边距：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;

解决方案

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.

这篇关于顶级&左边vs边缘顶部&利润率左的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！