Разница между "margin-left" и "left" (или "margin-right" и "right" )

Ответ 1

Когда вы перемещаете что-то с помощью 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, и вы увидите разницу.

Ответ 2

Самый простой способ объяснить, что margin-left перемещает сам элемент, тогда как left (с position: relative) отбрасывает другие элементы. Хотя это не так, возможно, самое четкое описание.

С изображениями:

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

С position: absolute left также служит для определения расстояния между самим элементом и левой границей любого объекта, против которого расположен элемент.

Ответ 3

Я могу только предположить, что он существует для других позиций с полями. то есть:.

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

Ответ 4

Рассмотрим любой элемент блока (например, DIV) в виде поля. position:relative; делает положение окна на странице относительно элемента, в который он вложен (например, другой DIV), и left:10px; перемещает поле 10 пикселей вправо (AWAY слева).

Теперь margin-left: 10px; не имеет к этому никакого отношения и просто создает поле (невидимое силовое поле, если вы предпочитаете: P) в левой части окна, что заставляет его двигаться, если другой левый элемент остается неподвижным.