Tóm tắt nội dung
CSS Margins là gì?
Sử dụng thuộc tính Margins để canh lề cho một phần tử.
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 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)
- margin-top (Canh lề phía trên)
- margin-right (Canh lề phía phải)
- margin-bottom (Canh lề phía dưới)
- margin-left (Canh lề phía trái)
Lưu ý: Các thuộc tính trên có thể được sử dụng bởi các giá trị sau:
- auto – (trình duyệt tự động thiết lập giá trị)
- length – có thể xác định theo đơn vị: px, em, %, hoặc inherit (kế thừa giá trị của phần tử chứa nó)
|
0 1 2 3 4 5 |
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } |
Cách viết rút gọn thuộc tính Margin
Để rút ngắn cách viết, ta có thể sử dụng tất cả các thuộc tính của Margin theo thứ tự như sau: Margin: top right bottom left
Giả sử ta có các thuộc tính như ví dụ 1, viết lại theo cách rút gọn:
|
0 1 |
p { margin: 100px 150px 100px 80px } |
Tương tự ta có cách viêt với 3 giá trị và 2 giá trị cho thuộc tính Margin, ý nghĩa của chúng như sau:
Nếu thuộc tính lề có ba giá trị:
margin: 25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
Nếu thuộc tính lề có hai giá trị:
margin: 25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
Nếu thuộc tính lề có một giá trị: margin: 25px; Có nghĩa là tất cả 4 lề đều 25px.
Giá trị Margin Auto
Bạn có thể canh lề tự động bằng giá trị Margin: auto
Phần tử sẽ được canh lề tự động đều 2 bên đều nhau
|
0 1 2 3 4 5 6 |
div { width: 300px; margin: auto; border: 1px solid red; } |
See the Pen Margin auto by nguyen tien (@nguyentien365) on CodePen.
Giá trị Margin inherit – tính kế thừa phần tử
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ử cha (<div>):
|
0 1 2 3 4 5 6 7 8 9 |
div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; } |
See the Pen Margin inherit value by nguyen tien (@nguyentien365) on CodePen.
Trường hợp kết hợp lề – Margin Collapse
Các lề trên và dưới của các khối đôi khi được kết hợp (thu gọn) thành một lề duy nhất, lề được chọn sẽ là lề có kích thước lớn nhất trong các lề riêng lẻ (hoặc chỉ một trong số chúng, nếu chúng bằng nhau).
|
0 1 2 3 4 5 6 |
h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; } |
Trong ví dụ trên, phần tử <h1> có lề dưới là 50px và phần tử <h2> có lề trên được đặt thành 20px. Thông thường lề sẽ được tính là 70px (50px + 20px), nhưng trong trường hợp này kết hợp lề sẽ diễn ra, lề được chọn chuẩn sẽ là lề lớn hơn (50px).
