CSS “margin-left”和“left”（或“margin-right”和“right”）之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3859801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between "margin-left", and "left" (or "margin-right", and "right")
提问by Joel
What is the difference between
margin-left: 10px;and position: relative; left: 10px;?
margin-left: 10px;和 和有position: relative; left: 10px;什么区别
？
It seems to produce the same result
它似乎产生相同的结果
回答by Austin Fitzpatrick
When you move something with position:relativeyou're not actually moving the space it takes up on the page, just where it is displayed.
当您移动某物时，position:relative实际上并没有移动它在页面上占据的空间，而是移动它显示的位置。
An easy way to test this is to use a simple structure like this:
一个简单的测试方法是使用一个简单的结构，如下所示：
<div id = "testbox">
<img src = "http://www.dummyimage.com/300x200" id = "first">
<img src = "http://www.dummyimage.com/300x200" id = "second">
</div>
with the following CSS:
使用以下 CSS：
img{ display:block; }
#first{ margin-top:50px; }
versus this CSS:
与此 CSS 对比：
img{display:block;}
#first{position:relative; top:50px;}
You'll see that the first moves everything down 50px while the second only moves the first image down (which means it will overlap the second image).
您会看到第一个将所有内容向下移动 50 像素，而第二个仅将第一个图像向下移动（这意味着它将与第二个图像重叠）。
Edit: you can check it out in action here: http://www.jsfiddle.net/PKqMT/5/
编辑：您可以在此处查看实际操作：http: //www.jsfiddle.net/PKqMT/5/
Comment out the position:relative;and top:100px;lines and uncomment the margin-topline and you'll see the difference.
注释掉position:relative;和top:100px;线条，并取消对margin-top行，你会看到其中的差别。
回答by David says reinstate Monica
The simplest way I can explain it is that margin-leftmoves the element itself, whereas left(with position: relative) pushes other elements away. Although that's not, perhaps the clearest description.
我可以解释的最简单的方法是margin-left移动元素本身，而left(with position: relative) 将其他元素推开。虽然这不是，但也许是最清楚的描述。
With pictures, though:
不过有图片：
+---------------------------------------------------------------------------+--------------+
| |
| +------------------------------------------------------------+ |
| | | |
| | +------------------------------+ | |
| | | | | |
position | | | | | |
<--Left---->|<---margin--->|<---padding-->|<------------width----------->|<---padding-->|<---margin--->|
| | | | | |
| | +------------------------------+ | |
| | | |
| +------------------------------------------------------------+ |
+------------------------------------------------------------------------------------------+
With position: absoluteleft also serves to define the distance between the element itself and the left boundary of whatever object the element is positioned against.
使用position: absoluteleft 还用于定义元素本身与元素所在的任何对象的左边界之间的距离。
回答by Lazlo
I can only suppose it is there for other positions with margins. i.e.:
我只能假设它适用于其他有利润的头寸。IE：
margin-left: 5px;
position: inherited; left: 10px;
回答by Teo Maragakis
Consider any given block element (a DIV for example) as a box. position:relative;makes the box's position on the page relative to the element it is nested inside (another DIV for example) and left:10px;moves the box 10 pixels to the right (AWAY from the left).
将任何给定的块元素（例如 DIV）视为一个盒子。position:relative;使框在页面上的位置相对于它嵌套在其中的元素（例如另一个 DIV）并将left:10px;框向右移动 10 个像素（从左边离开）。
Now margin-left: 10px;has nothing to do with that and just creates a margin (an invisible power field if you prefer :P) on the left of the box, which makes it move if there's another fixed element stuck on its left.
现在margin-left: 10px;与此无关，只是在框的左侧创建一个边距（如果您愿意，则为不可见的功率场：P），如果有另一个固定元素卡在其左侧，则它会移动。
