“margin-left”和“left”（或“margin-right”和“right”）之间的区别答案

【问题标题】：Difference between "margin-left", and "left" (or "margin-right", and "right")“margin-left”和“left”（或“margin-right”和“right”）之间的区别
【发布时间】：2010-10-04 23:08:08
【问题描述】：

两者有什么区别 margin-left: 10px; 和 position: relative; left: 10px;?

似乎产生了相同的结果

【问题讨论】：

标签： css

【解决方案1】：

我能解释的最简单的方法是margin-left 移动元素本身，而left（与position: relative）将其他元素推开。虽然这不是，但也许是最清晰的描述。

虽然有图片：

            +---------------------------------------------------------------------------+--------------+
            |                                                                                          |
            |              +------------------------------------------------------------+              |
            |              |                                                            |              |
            |              |              +------------------------------+              |              |
            |              |              |                              |              |              |
  position  |              |              |                              |              |              |
<--Left---->|<---margin--->|<---padding-->|<------------width----------->|<---padding-->|<---margin--->|
            |              |              |                              |              |              |
            |              |              +------------------------------+              |              |
            |              |                                                            |              |
            |              +------------------------------------------------------------+              |
            +------------------------------------------------------------------------------------------+

position: absoluteleft 还用于定义元素本身与该元素所针对的任何对象的左边界之间的距离。

【讨论】：

我找到的最清楚的解释！再次感谢您的图片！

【解决方案2】：

当您使用position:relative 移动某些内容时，您实际上并没有移动它在页面上占用的空间，而是移动它显示的位置。

一个简单的测试方法是使用这样的简单结构：

<div id = "testbox">
  <img src = "http://www.dummyimage.com/300x200" id = "first">
  <img src = "http://www.dummyimage.com/300x200" id = "second">
</div>

使用以下 CSS：

img{ display:block; }
#first{ margin-top:50px; }

相对于这个 CSS：

img{display:block;}
#first{position:relative; top:50px;}

您会看到第一个将所有内容向下移动 50 像素，而第二个仅将第一个图像向下移动（这意味着它将与第二个图像重叠）。

编辑：您可以在此处查看实际操作：http://www.jsfiddle.net/PKqMT/5/

注释掉position:relative; 和top:100px; 行并取消注释margin-top 行，您会看到不同之处。

【讨论】：

好答案.. :)

【解决方案3】：

我只能假设它存在于其他有边距的位置。即：

margin-left: 5px;
position: inherited; left: 10px;

【讨论】：

【解决方案4】：

将任何给定的块元素（例如 DIV）视为一个盒子。 position:relative; 使框在页面上的位置相对于它嵌套在其中的元素（例如另一个 DIV），left:10px; 将框向右移动 10 个像素（远离左侧）。

现在margin-left: 10px; 与此无关，只是在框的左侧创建一个边距（如果您愿意：P，这是一个不可见的功率场），如果左侧有另一个固定元素卡住，它会移动。

【讨论】：

【解决方案5】：

margin-left, margin-right, ... => 这些在其父级的填充之后添加像素但顶部，左侧，... => 这些添加来自其父级边缘（边框）的像素，忽略填充假设他们的父母的定位是相对的

【讨论】：