Thuộc tính margin

Thuộc tính margin thiết lập khoảng cách bên ngoài cho phần tử. Giá trị của thuộc tính có thể là bất kỳ đơn vị kích thước nào hoặc từ khóa auto, cho phép trình duyệt tự tính toán khoảng cách cho phần tử. Theo mặc định, mỗi trình duyệt có thể thêm các khoảng cách khác nhau cho các phần tử.

Thuộc tính này là cách viết tắt cho các thuộc tính margin-top, margin-right, margin-bottom, margin-left.

Cú pháp

bộ chọn {
	margin: giá trị;
}

Số lượng giá trị

Thuộc tính margin nhận 1, 2, 3 hoặc 4 giá trị, được liệt kê cách nhau bởi dấu cách:

Số lượng	Mô tả
`1`	Một giá trị xác định khoảng cách cho tất cả các phía của phần tử.
`2`	Giá trị đầu tiên xác định khoảng cách phía trên và phía dưới, giá trị thứ hai - bên phải và bên trái.
`3`	Giá trị đầu tiên xác định khoảng cách phía trên, giá trị thứ hai - bên phải và bên trái, giá trị thứ ba - phía dưới.
`4`	Giá trị đầu tiên xác định khoảng cách phía trên, giá trị thứ hai - bên phải, giá trị thứ ba - phía dưới, giá trị thứ tư - bên trái.

Ví dụ

Bây giờ chúng ta sẽ có một khối không có khoảng cách ngoài:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Ví dụ

Bây giờ chúng ta sẽ đặt khoảng cách ngoài 10px cho khối:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Ví dụ

Hãy đặt khoảng cách ngoài 10px phía trên và phía dưới và 20px - bên trái và bên phải cho khối:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Ví dụ

Hãy đặt khoảng cách ngoài 5px phía trên, 15px bên phải, 25px phía dưới và 35px bên trái cho khối:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Xem thêm

thuộc tính padding,
thiết lập khoảng cách bên trong