Thuộc tính lề kiểu
Ví dụ
Đặt tất cả bốn lề của phần tử <div>:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Hãy tự mình thử »Sự miêu tả
Thuộc tính lề đặ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} - tất 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 sẽ là 10px
- Ba giá trị, như: div {margin: 50px 10px 20px}- lề trên sẽ là 50px, lề trái và lề phải sẽ 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 sẽ là 10px, lề dưới sẽ là 20px, lề trái sẽ là 30px
Cả thuộc tính lề và thuộc tính đệm đều chèn khoảng trắng xung quanh một phần tử. Tuy nhiên, điểm khác biệt là lề sẽ chèn khoảng trắng xung quanh đường viền, trong khi phần đệm sẽ chèn khoảng trắng 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ả về thuộc tính lề:
object .style.margin
Đặt thuộc tính lề:
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ả về: | Một chuỗi, biểu diễn lề của một phần tử |
Phiên bản CSS | CSS1 |
Thêm ví dụ
Ví dụ
Thay đổi tất cả bốn lề của phần tử <div> thành "25px":
document.getElementById("myDiv").style.margin = "25px";
Hãy tự mình thử »Ví dụ
Trả về lề của phần tử <div>:
alert(document.getElementById("myDiv").style.margin);
Hãy tự mình thử »Ví dụ
Sự khác biệt giữa thuộc tính lề và thuộc tính đệm:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: CSS Margin
Tham chiếu CSS: thuộc tính lề