Thuộc tính margin trong CSS

 Đặc tính margin trong CSS được dùng để tạo khoảng trắng xung quanh phần tử, bên ngoài các đường viền. Các đặc tính này sẽ đặt lề cho từng cạnh của phần tử (trên, dưới, trái, phải).

Thuộc tính margin được chia ra làm 2 dạng:

Dạng cơ bản gồm 4 thuộc tính:

• margin-top: thêm khoảng không gian bên ngoài phía trên thành phần.
• margin-right: thêm khoảng không gian bên ngoài phía bên phải thành phần.
• margin-bottom: thêm khoảng không gian bên ngoài phía dưới thành phần.
• margin-left: thêm khoảng không gian bên ngoài phía bên trái thành phần.

Dạng tổng quát gồm 4 thuộc tính:

• margin với 4 giá trị.
• margin với 3 giá trị.
• margin với 2 giá trị.
• margin với 1 giá trị.

Tất cả các đặc tính lề có thể có các giá trị sau:

• auto - trình duyệt tự tính toán lề
• length - xác định lề theo px, pt, cm…
• % - xác định lề theo % so với chiều rộng của phần tử
• inherit - xác định lề kế thừa từ phần tử mẹ

Đặc tính rút gọn của lề trong CSS

Để rút gọn code, có thể đưa tất cả đặc tính lề vào một đặc tính margin duy nhất, với các đặc tính riêng:

margin-top

margin-right

margin-bottom

margin-left

Nếu đặc tính margin có 4 giá trị

margin: 25px 50px 75px 100px;

lề trên 25px

lề phải 50px

lề dưới 75px

lề trái 100px

p {

 margin: 25px 50px 75px 100px;

}

Nếu đặc tính margin có 3 giá trị

margin: 25px 50px 75px;

lề trên 25px

lề trái và phải 50px

lề dưới 75px

p {

 margin: 25px 50px 75px;

}

Nếu đặc tính margin có 2 giá trị

margin: 25px 50px;

lề trên và dưới 25px

lề trái và phải 50px

p {

 margin: 25px 50px;

}

Nếu đặc tính margin có 1 giá trị

margin: 25px;

tất cả các lề đều là 25px

p {

 margin: 25px;

}