Sự khác biệt giữa "lề trái" và "trái" (hoặc "lề phải" và "phải")

Question

Sự khác biệt giữa margin-left: 10px; và position: relative; left: 10px; là gì?

Dường như sản xuất cùng một kết quả

Answer 1

Khi bạn di chuyển thứ gì đó có trên position:relative, bạn không thực sự di chuyển không gian cần thiết trên trang, nơi nó được hiển thị.

Một cách dễ dàng để kiểm tra điều này là sử dụng một cấu trúc đơn giản như thế này:

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

với CSS sau đây:

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

so với CSS này:

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

Bạn sẽ thấy rằng di chuyển đầu tiên mọi thứ xuống 50px trong khi thứ hai chỉ di chuyển hình ảnh đầu tiên xuống (có nghĩa là nó sẽ chồng lên hình ảnh thứ hai).

Edit: bạn có thể kiểm tra xem nó ra trong hành động ở đây: http://www.jsfiddle.net/PKqMT/5/

Comment ra position:relative; và top:100px; dòng và bỏ ghi chú dòng margin-top và bạn sẽ thấy sự khác biệt.

Answer 2

Tôi chỉ có thể giả sử nó ở đó cho các vị trí khác có lề. tức là:

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

Answer 3

Cách đơn giản nhất tôi có thể giải thích là margin-left di chuyển phần tử, trong khi left (với position: relative) đẩy các thành phần khác ra xa. Mặc dù không, có lẽ là mô tả rõ ràng nhất.

Với hình ảnh, mặc dù:

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

Với position: absolute cũng để lại phục vụ để xác định khoảng cách giữa các yếu tố chính nó và đường biên bên trái của bất cứ đối tượng phần tử được định vị chống lại.

Answer 4

Hãy xem xét bất kỳ phần tử khối nhất định nào (ví dụ DIV) làm hộp. position:relative; làm cho vị trí của ô trên trang liên quan đến phần tử được lồng vào bên trong (ví dụ DIV khác) và left:10px; di chuyển hộp 10 pixel sang bên phải (AWAY từ bên trái).

Bây giờ margin-left: 10px; không có gì để làm với điều đó và chỉ tạo ra một lề (một trường điện vô hình nếu bạn thích: P) ở bên trái của hộp, mà làm cho nó di chuyển nếu có một yếu tố cố định bị mắc kẹt bên trái của nó.