Thuộc tính CSS margin

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

Thuộc tính margin viết tắt đặt tất cả các thuộc tính lề trong một dòng biểu thị. Thuộc tính này có thể có từ 1 đến 4 giá trị.

Giải thích

Thuộc tính này đặt chiều rộng của tất cả các giá trị lề của một phần tử, hoặc đặt chiều rộng của các giá trị lề trên các cạnh khác nhau.

Các giá trị lề bên ngoài thẳng đứng của các phần tử khối cạnh nhau sẽ được hợp nhất, trong khi các phần tử in-line thực tế không chiếm lề trên và dưới. Các giá trị lề bên trái và bên phải của các phần tử in-line sẽ không được hợp nhất. Đều như vậy, các giá trị lề của các phần tử trôi sẽ không được hợp nhất. Cho phép chỉ định giá trị lề âm, nhưng cần cẩn thận khi sử dụng.

Ghi chú:Cho phép sử dụng giá trị âm.

Ví dụ 1

margin:10px 5px 15px 20px;
  • Lề trên là 10px
  • Lề phải là 5px
  • Lề dưới là 15px
  • Lề trái là 20px

Ví dụ 2

margin:10px 5px 15px;
  • Lề trên là 10px
  • Lề bên phải và bên trái là 5px
  • Lề dưới là 15px

Ví dụ 3

margin:10px 5px;
  • Lề trên và lề dưới là 10px
  • Lề bên phải và bên trái là 5px

Ví dụ 4

margin:10px;
  • Tất cả 4 giá trị lề đều là 10px

Xem thêm:

Hướng dẫn CSS:Phần cách ngoài trong CSS

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

Ví dụ

Đặt 4 giá trị lề cho phần tử p:

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

Thử ngay

Ngữ pháp CSS

margin: length|auto|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Trình duyệt tính toán lề.
length Định nghĩa giá trị lề bên ngoài bằng đơn vị cụ thể, chẳng hạn như pixel, cm, v.v. Giá trị mặc định là 0px.
% Định nghĩa giá trị lề bên ngoài bằng phần trăm chiều rộng của phần tử bao gồm.
inherit Định nghĩa rằng các giá trị lề bên ngoài nên kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: 0
Kế thừa: no
Phiên bản: CSS1
Ngữ pháp JavaScript: object.style.margin="10px 5px"

Các ví dụ khác

Tất cả các thuộc tính lề trong một dòng biểu thị
Ví dụ này minh họa cách đặt tất cả các thuộc tính lề vào một dòng biểu thị.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5