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
Thuộc tính margin
CSS được sử dụng để tạo khoảng trống xung quanh các phần tử, bên ngoài bất kỳ đường viền được xác định nào.
Với CSS, bạn có toàn quyền kiểm soát lề. Có các thuộc tính để đặt lề cho mỗi cạnh của một phần tử (trên, phải, dưới và trái).
Ký quỹ - Các mặt riêng lẻ
CSS có các thuộc tính để xác định lề cho mỗi cạnh của một phần tử:
-
margin-top
-
margin-right
-
margin-bottom
-
margin-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 mức ký quỹ
- chiều dài - 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
- kế thừa - chỉ định rằng lề phải được kế thừa từ phần tử cha
Mẹo: Cho phép giá trị âm.
Ví 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;
}
Hãy tự mình thử » Ký quỹ - Thuộc tính viết tắt
Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính lề trong một thuộc tính.
Thuộc tính margin
là thuộc tính viết tắt của các thuộc tính lề riêng lẻ sau:
-
margin-top
-
margin-right
-
margin-bottom
-
margin-left
Vì vậy, đây là cách nó hoạt động:
Nếu thuộc tính margin
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
Ví dụ
Sử dụng thuộc tính tốc ký lề với bốn giá trị:
p {
margin: 25px 50px 75px 100px;
}
Hãy tự mình thử » Nếu thuộc tính margin
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
Nếu thuộc tính margin
có hai giá trị:
- lề: 25px 50px;
- lề trên và dưới là 25px
- lề phải và trái là 50px
Nếu thuộc tính margin
có một giá trị:
- lề: 25px;
- tất cả bốn lề đều là 25px
Giá trị tự động
Bạn có thể đặt thuộc tính lề thành auto
để căn giữa phần tử theo chiều ngang trong vùng chứa của nó.
Phần tử sau đó sẽ chiếm chiều rộng được chỉ định và khoảng trống còn lại sẽ được chia đều cho lề trái và lề phải.
Ví dụ
Sử dụng lề: tự động:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Hãy tự mình thử »Giá trị kế thừa
Ví dụ này cho phép kế thừa lề trái của phần tử <p class="ex1"> từ phần tử cha (<div>):
Ví dụ
Sử dụng giá trị kế thừa:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}
Hãy tự mình thử »Tất cả thuộc tính lề CSS
Property | Description |
---|---|
margin | A shorthand property for setting all the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |