Đặc tính margin
trong CSS được dùng để tạo khoảng trắng xung quanh phần tử, bên ngoài các đường viền. Các đặc tính này sẽ đặt lề cho từng cạnh của phần tử (trên, dưới, trái, phải).
Các cạnh của lề trong CSS
CSS có các đặc tính xác định lề cho từng cạnh trong phần tử:
- margin-top
- margin-right
- margin-bottom
- margin-left
Tất cả các đặc tính lề có thể có các giá trị sau:
- auto – trình duyệt tự tính toán lề
- length – xác định lề theo px, pt, cm…
- % – xác định lề theo % so với chiều rộng của phần tử
- inherit – xác định lề kế thừa từ phần tử mẹ
Có thể dùng giá trị âm. Ví dụ dưới đây tạo lề khác nhau cho 4 cạnh của phần tử <p>
:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Đặc tính rút gọn của lề trong CSS
Để rút gọn code, có thể đưa tất cả đặc tính lề vào một đặc tính margin duy nhất, với các đặc tính riêng:
- margin-top
- margin-right
- margin-bottom
- margin-left
Nếu đặc tính margin có 4 giá trị
margin: 25px 50px 75px 100px;
- lề trên 25px
- lề phải 50px
- lề dưới 75px
- lề trái 100px
p {
margin: 25px 50px 75px 100px;
}
Nếu đặc tính margin có 3 giá trị
margin: 25px 50px 75px;
- lề trên 25px
- lề trái và phải 50px
- lề dưới 75px
p {
margin: 25px 50px 75px;
}
Nếu đặc tính margin có 2 giá trị
margin: 25px 50px;
- lề trên và dưới 25px
- lề trái và phải 50px
p {
margin: 25px 50px;
}
Nếu đặc tính margin có 1 giá trị
margin: 25px;
- tất cả các lề đều là 25px
p {
margin: 25px;
}
Giá trị mặc định
Khi đặt đặc tính margin
về giá trị auto,
nó sẽ tự động căn giữa phần tử theo chiều ngang. Phần tử chiếm phần độ rộng định sẵn, còn lại sẽ được chia đều cho lề trái và phải.
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Giá trị inherit (kế thừa)
Ví dụ này đặt lề trái của phần từ <p class=”ex1”>
kế thừa từ phần tử mẹ là <div>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
Margin Collapse
Đôi khi lề trên và lề dưới của các phần tử chồng vào nhau thành một lề duy nhất bằng kích thước của lề lớn hơn. Việc này chỉ xảy ra với lề trên và dưới chứ không xảy ra với lề trái và phải.
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Ở ví dụ trên, lề dưới của <h1>
là 50px và lề trên của <h2>
là 20px. Thông thường phần lề giữa <h1>
và <h2>
sẽ là tổng của cả 2 (tức là 70px = 50px + 20px) nhưng do việc gộp lề mà phần lề này chỉ là 50px.
4 Th4 2021
30 Th3 2021
30 Th3 2021
30 Th3 2021
1 Th4 2021
4 Th4 2021