Lề CSS
Lề được sử dụng để tạo không gian xung quanh các phần tử, bên ngoài bất kỳ đường viền xác định nào.
Lề CSS
Các thuộc tính CSS marginđược sử dụng để tạo không gian xung quanh các phần tử, bên ngoài bất kỳ đường viền xác định nào.
Với CSS, bạn có toàn quyền kiểm soát lợi nhuận. Có các thuộc tính để đặt lề cho mỗi bên của một phần tử (trên cùng, bên phải, dưới cùng và bên trái).
Ký quỹ - Các mặt riêng lẻ
CSS có các thuộc tính để chỉ định lề cho mỗi bên của phần tử:
margin-topmargin-rightmargin-bottommargin-left
Tất cả các thuộc tính lề có thể có các giá trị sau:
- tự động - trình duyệt tính toán lợi nhuận
- length - chỉ định lề bằng px, pt, cm, v.v.
- % - chỉ định lề tính bằng% chiều rộng của phần tử chứa
- inherit - chỉ định rằng lề phải được kế thừa từ phần tử mẹ
Mẹo: Giá trị âm được phép.
Thí dụ
Đặt các lề khác nhau cho cả bốn cạnh của phần tử <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Ký quỹ - Thuộc tính tốc ký
Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính ký quỹ trong một thuộc tính.
Thuộc margintính này là thuộc tính viết tắt cho các thuộc tính ký quỹ riêng lẻ sau:
margin-topmargin-rightmargin-bottommargin-left
Vì vậy, đây là cách nó hoạt động:
Nếu thuộc margintính có bốn giá trị:
- lề: 25px 50px 75px 100px;
- lề trên là 25px
- lề phải là 50px
- lề dưới là 75px
- lề trái là 100px
Thí dụ
Sử dụng thuộc tính tốc ký ký quỹ với bốn giá trị:
p {
margin: 25px 50px 75px 100px;
}
Nếu thuộc margintính có ba giá trị:
- lề: 25px 50px 75px;
- lề trên là 25px
- lề phải và trái là 50px
- lề dưới là 75px
Thí dụ
Sử dụng thuộc tính viết tắt ký quỹ với ba giá trị:
p {
margin: 25px 50px 75px;
}
Nếu thuộc margintính có hai giá trị:
- lề: 25px 50px;
- lề trên và dưới là 25px
- lề phải và trái là 50px
Thí dụ
Sử dụng thuộc tính viết tắt lề với hai giá trị:
p {
margin: 25px 50px;
}
Nếu thuộc margintính có một giá trị:
- lề: 25px;
- cả bốn lề đều là 25px
Thí dụ
Sử dụng thuộc tính tốc ký ký quỹ với một giá trị:
p {
margin: 25px;
}
Giá trị tự động
Bạn có thể đặt thuộc tính margin thành căn autogiữa theo chiều ngang của phần tử bên trong vùng chứa của nó.
Khi đó, phần tử sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa lề trái và lề phải.
Thí dụ
Sử dụng ký quỹ: auto:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Giá trị kế thừa
Ví dụ này cho phép lề trái của phần tử <p class = "ex1"> được kế thừa từ phần tử mẹ (<div>):
Thí dụ
Sử dụng giá trị kế thừa:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}