Thuộc tính marginLeft

Định nghĩa và cách sử dụng

marginLeft cài đặt hoặc trả về cạnh ngoài trái của phần tử.

Thuộc tính margin và Thuộc tính padding Tất cả đều chèn không gian xung quanh phần tử. Nhưng khác biệt ở chỗ, margin chèn không gian xung quanh viền, trong khi padding chèn không gian trong viền của phần tử.

Xem thêm:

Hướng dẫn CSS:CSS viền ngoài

Hướng dẫn CSS:Thuộc tính margin-left

Hướng dẫn HTML DOM:Thuộc tính margin

Ví dụ 1

Cài đặt cạnh ngoài trái của phần tử <div>:

document.getElementById("myDiv").style.marginLeft = "50px";

Thử nghiệm trực tiếp

Ví dụ 2

Chuyển đổi lại cạnh ngoài trái của phần tử <div> về "normal":

document.getElementById("myDiv").style.marginLeft = "0px";

Thử nghiệm trực tiếp

Ví dụ 3

Trả về cạnh ngoài trái của phần tử <div>:

alert(document.getElementById("myDiv").style.marginLeft);

Thử nghiệm trực tiếp

Ví dụ 4

Sự khác biệt giữa marginLeft và paddingLeft:

function changeMargin() {
  document.getElementById("myDiv").style.marginLeft = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.paddingLeft = "100px";
}

Thử nghiệm trực tiếp

Cú pháp

Trả về thuộc tính marginLeft:

object.style.marginLeft

Cài đặt thuộc tính marginLeft:

object.style.marginLeft = "%|length|auto|inherit"

Giá trị thuộc tính

Giá trị Mô tả
% Định nghĩa cạnh ngoài trái bằng phần trăm chiều rộng của phần tử cha.
length Định nghĩa cạnh ngoài trái bằng đơn vị độ dài.
auto Cài đặt cạnh ngoài trái bằng trình duyệt.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: 0
Giá trị trả về: Chuỗi, biểu thị cạnh ngoài trái của phần tử.
Phiên bản CSS: CSS1

Trình duyệt hỗ trợ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ