Thuộc tính margin của style

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

margin Thuộc tính này thiết lập hoặc trả về khoảng cách ngoài cùng của phần tử.

Tính năng này có thể sử dụng một đến bốn giá trị:

  • Một giá trị, ví dụ: div {margin: 50px} - Tất cả bốn khoảng cách ngoài cùng đều là 50px
  • Hai giá trị, ví dụ: div {margin: 50px 10px} - Khoảng cách ngoài cùng trên và dưới là 50px, bên trái và bên phải là 10px
  • Ba giá trị, ví dụ: div {margin: 50px 10px 20px} - Khoảng cách ngoài cùng trên là 50px, bên trái và bên phải là 10px, dưới là 20px
  • Bốn giá trị, ví dụ: div {margin: 50px 10px 20px 30px} - khoảng cách bên ngoài trên là 50px, khoảng cách bên ngoài phải là 10px, khoảng cách bên ngoài dưới là 20px, khoảng cách bên ngoài trái là 30px

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

Xem thêm:

Hướng dẫn CSS:CSS cạnh ngoài

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

Mô hình

Ví dụ 1

Đặt tất cả bốn khoảng cách bên ngoài của phần tử <div>:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

Thử ngay

Ví dụ 2

Thay đổi tất cả bốn khoảng cách bên ngoài của phần tử <div> thành "25px":

document.getElementById("myDiv").style.margin = "25px";

Thử ngay

Ví dụ 3

Trả về khoảng cách bên ngoài của phần tử <div>:

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

Thử ngay

Ví dụ 4

Khoảng cách margin và padding khác nhau:

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

Thử ngay

Cú pháp

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

object.style.margin

Đặt thuộc tính margin:

object.style.margin = "%|length|auto|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
% Định nghĩa khoảng cách bên ngoài bằng phần trăm chiều rộng của phần tử cha.
length Định nghĩa khoảng cách bên ngoài bằng đơn vị độ dài.
auto Browser thiết lập khoảng cách bên ngoài (tất cả bốn khoảng cách bên ngoài sẽ bằng nhau).
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế 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ị khoảng cách bên ngoài của phần tử.
Phiên bản CSS: CSS1

Hỗ trợ trình duyệt

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