Tôi không chắc liệu mình có hiểu hết sự khác biệt giữa hai điều này hay không.
Ai đó có thể giải thích lý do tại sao tôi sử dụng cái này hơn cái kia và chúng khác nhau như thế nào?
Câu trả lời:
toplà để tinh chỉnh một phần tử với việc sử dụng thuộc positiontính.
margin-toplà để đo khoảng cách bên ngoài tới phần tử, so với phần tử trước đó.
Ngoài ra, tophành vi có thể khác nhau tùy thuộc vào loại vị trí absolute, relativehoặc fixed.
Bạn sẽ sử dụng lề, nếu bạn muốn di chuyển một phần tử (khối) ra khỏi các phần tử khác trong luồng tài liệu. Điều đó có nghĩa là nó sẽ đẩy các yếu tố sau ra xa / xuống sâu hơn. Lưu ý rằng lề dọc của các phần tử khối liền kề sẽ sụp đổ.
Nếu bạn muốn phần tử không có ảnh hưởng đến các yếu tố xung quanh, bạn muốn sử dụng định vị (abs., Rel.) Và top, bottom, leftvà rightcài đặt.
Với relativeđịnh vị, phần tử sẽ vẫn chiếm không gian ban đầu của nó như khi được định vị tĩnh. Đó là lý do tại sao không có gì xảy ra, nếu bạn chỉ cần chuyển từ staticđến relativevị trí. Từ đó, bạn có thể đẩy nó qua các yếu tố xung quanh.
Với absoluteđịnh vị, bạn loại bỏ hoàn toàn phần tử khỏi luồng tài liệu (tĩnh), do đó, nó sẽ giải phóng không gian mà phần tử đó chiếm dụng. Sau đó, bạn có thể đặt nó một cách tự do - nhưng liên quan đến phần tử được định vị không tĩnh tốt nhất tiếp theo được bao bọc xung quanh nó. Nếu không có, nó sẽ được neo vào toàn bộ trang.
Ký quỹ áp dụng và mở rộng / hợp đồng ranh giới bình thường của phần tử nhưng khi bạn gọi phần trên, bạn đang bỏ qua vị trí thông thường của phần tử và thả nó sang một vị trí cụ thể.
Thí dụ:
html:
<div id="some_element">content</div>css:
#some_element {margin-top: 50%}Có nghĩa là phần tử sẽ bắt đầu hiển thị html ở độ cao 50% của vùng chứa (nghĩa là div hiển thị từ "content" sẽ được hiển thị ở 50% chiều cao của nút div hoặc html chứa nó ngay trước div # some_element) nhưng nếu bạn mở trình kiểm tra của trình duyệt (f12 trên Windows hoặc cmd + alt + i trên mac) và di chuột qua phần tử, bạn sẽ thấy ranh giới của nó được đánh dấu và nhận thấy phần tử đã bị đẩy xuống thay vì được định vị lại.
Mặt khác:
#some_element {top: 50%}Thực sự sẽ định vị lại phần tử có nghĩa là nó sẽ vẫn hiển thị ở 50% vùng chứa của nó nhưng nó sẽ định vị lại phần tử để cạnh của nó bắt đầu ở 50% phần tử chứa nó. Nói cách khác, sẽ có một khoảng cách giữa các cạnh của phần tử và vùng chứa của nó.
Chúc mừng!
từ byte:
"Lề là khoảng trống giữa cạnh hộp của một phần tử và cạnh của hộp hoàn chỉnh, chẳng hạn như lề của một chữ cái. 'Top' thay thế cạnh lề của phần tử khỏi hộp chứa các khối, chẳng hạn như cùng một mẩu giấy bên trong một hộp các tông, nhưng nó không úp vào mép của hộp. "
Sự hiểu biết của tôi là margin-top tạo ra một lề trên phần tử và top đặt cạnh trên của phần tử bên dưới cạnh trên của phần tử chứa ở phần bù.
bạn có thể thử nó ở đây:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
chỉ cần thay thế top bằng margin-top để thấy sự khác biệt.