Thuộc tính lề kiểu
Thí dụ
Đặt tất cả bốn lề của một phần tử <div>:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Định nghĩa và Cách sử dụng
Thuộc tính margin đặt hoặc trả về lề của một phần tử.
Thuộc tính này có thể nhận từ một đến bốn giá trị:
- Một giá trị, như: div {margin: 50px} - cả bốn lề sẽ là 50px
- Hai giá trị, như: div {margin: 50px 10px} - lề trên và dưới sẽ là 50px, lề trái và phải là 10px
- Ba giá trị, như: div {margin: 50px 10px 20px} - lề trên sẽ là 50px, lề trái và phải là 10px, lề dưới sẽ là 20px
- Bốn giá trị, như: div {margin: 50px 10px 20px 30px} - lề trên sẽ là 50px, lề phải là 10px, lề dưới là 20px, lề trái sẽ là 30px
Cả thuộc tính margin và thuộc tính padding đều chèn khoảng trắng xung quanh một phần tử. Tuy nhiên, sự khác biệt là lề chèn không gian xung quanh đường viền, trong khi padding chèn không gian bên trong đường viền của một phần tử.
Hỗ trợ trình duyệt
| Property | |||||
|---|---|---|---|---|---|
| margin | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả lại tài sản ký quỹ:
object.style.margin
Đặt thuộc tính ký quỹ:
object.style.margin = "%|length|auto|initial|inherit"
Giá trị tài sản
| Value | Description |
|---|---|
| % | Defines the margins in % of the width of the parent element |
| length | Defines the margins in length units |
| auto | The browser sets the margins (all four margins will be equal) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Chi tiết kỹ thuật
| Giá trị mặc định: | 0 |
|---|---|
| Giá trị trả lại: | Một chuỗi, đại diện cho các lề của một phần tử |
| Phiên bản CSS | CSS1 |
Các ví dụ khác
Thí dụ
Thay đổi tất cả bốn lề của phần tử <div> thành "25px":
document.getElementById("myDiv").style.margin = "25px";
Thí dụ
Trả về lề của phần tử <div>:
alert(document.getElementById("myDiv").style.margin);
Thí dụ
Sự khác biệt giữa thuộc tính margin và thuộc tính padding:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Các trang liên quan
Hướng dẫn CSS: CSS Margin
Tham chiếu CSS: thuộc tính ký quỹ
❮ Đối tượng phong cách