Margin collapsing trong CSS - Học CSS căn bản & nâng cao
Trong CSS đôi lúc sẽ xảy ra trường hợp đặc biệt là các giá trị của thuộc tính margin chồng lấn các giá trị lên nhau. Nó sẽ lấy giá trị lớn nhất giữa hai gia trị của thuộc tính margin. Hôm nay, Zaidap.com sẽ hướng dẫn các bạn các trường hợp đặc biệt của thuộc tính margin này. 1. Phần Lý Thuyết Và ...
Trong CSS đôi lúc sẽ xảy ra trường hợp đặc biệt là các giá trị của thuộc tính margin chồng lấn các giá trị lên nhau. Nó sẽ lấy giá trị lớn nhất giữa hai gia trị của thuộc tính margin. Hôm nay, Zaidap.com sẽ hướng dẫn các bạn các trường hợp đặc biệt của thuộc tính margin này.
1. Phần Lý Thuyết Và Ví Dụ
Hiện tượng này của thuộc tính margin ta gọi là collapsing margins chỉ xảy ra trên phương dọc. Hiện tượng này không bao giờ xảy ra trên phương ngang.
Hiện tượng này xảy ra khi nào ? để nhận biết hiện tượng này trong quá trình phát triển web, chúng ta phải cần biết khi nào nó sẽ xuất hiện. Sau đây là các tình huống:
Các thẻ lân cận
Xem ví dụ sau
<body> <div class="c1">Text 1</div> <div class="c2">Text 2</div> </body>
body > div {
width: 300px;
height: 100px;;
}
.c1 {
border: 1px solid blue;
padding: 10px;
margin-bottom: 20px;
}
.c2 {
border: 1px solid red;
padding: 10px;
margin-top: 20px;
}Các bạn thấy rằng ta thêm vào thuộc tính margin-bottom cho c1 và margin-top cho c2 với giá trị lần lượt là 20px và 30px. Nếu các bạn bỏ đi một trong hai giá trị này thì khoảng cách của c1 và c2 thay đổi là 20px hoặc 30px. Theo đúng như cấu hình thì phải 50px nhưng ở đây thì giá trị lớn trong 2 giá trị được lấy trong tình huống này là 30px.
Thẻ cha và thẻ con
Xem ví dụ sau
<body>
<div class="parent">
<div class="child">
Text
</div>
</div>
</body>
body > div {
width: 300px;
height: 100px;;
}
.parent {
background-color: green;
margin-top: 50px;
}
.child {
background-color: blueviolet;
margin-top: 30px;
}Chúng ta thấy thẻ cha được cấu hình margin-top là 50px và của thẻ con là 30px. Giá trị mong đợi là 80px nhưng trên thực tế thì chỉ hiển thị là 50px. tương tự tình huống sẽ xảy ra với thuộc tính margin-bottom.
Thẻ rỗng
Xem ví dụ sau
<body> <div class="empty"> </div> </body>
body {
background-color: blueviolet;
}
.empty {
margin-bottom: 50px;
margin-top: 50px;
background-color: aquamarine;
}Ở đây thẻ div nếu không có height, padding, nội dung, border và thẻ con thì thì margin-top và margin-bottom sẽ tự hòa trộn lẫn nhau. Trong tình huống này ta không thấy được.
2. Phần Lưu Ý
Không phải lúc nào các margin cũng đều được hòa trộn. Sau đây là những trường hợp ngoại lệ:
- Đối với thẻ cha và con như tình huống hai, nếu thẻ cha co thiết lập thuộc tính border khác none thì margin 2 thẻ sẽ tách biệt.
- Hiện tượng này không có tác dụng với thẻ html.
- Cần tránh thiết lập giá trị margin âm, vì nếu hiện tượng này xảy ra nó sẽ lấy tổng của giá trị margin dương lớn nhất và margin âm nhỏ nhất để thiết lập cho margin chung. Điều này dẫn đến sự phức tạp cho quá trình phát triển web, rất khó cho việc bảo trì sau này.
- Các thẻ mang tính floating và có position: absolute thì hiện tượng này không xảy ra.
3. Cách Xử Lý Tình Huống
Làm sao có thẻ loại bỏ hiện tượng này, cách khắc phục ra sao. Xem ví dụ dưới đây
<body> <div class="c1">Text 1</div> <div class="c2">Text 2</div> </body>
body > div {
height: 100px;
width: 300px;
}
.c1 {
margin-bottom: 50px;
background-color: aquamarine;
}
.c2 {
margin-top: 30px;
background-color: blueviolet;
}Chúng ta có thể thêm vào thuộc tính display: inline-block vào một trong hai lớp c1 hoặc c2.
Hoặc có thể dùng thuộc tính position: absolute cho thẻ c2.
Tuy nhiên, đó chỉ là những cách giải quyết không mang tính tổng quát và tối. Để khắc phục triệt để thì ta làm như sau:
<body>
<div>
<div class="c1">Text 1</div>
</div>
<div>
<div class="c2">Text 2</div>
</div>
</body>
body > div:nth-child(1) {
height: 100px;
width: 300px;
margin: 0;
padding-bottom: 50px;
}
body > div:nth-child(2) {
height: 100px;
width: 300px;
margin: 0;
padding-top: 30px;
}
.c1 {
background-color: aquamarine;
width: 100%;
height: 100%;
}
.c2 {
background-color: blueviolet;
width: 100%;
height: 100%;
}Ta thêm vào 2 thẻ div bao lấy thẻ c1 và c2 . Sau đó, bỏ thuộc tính margin đi, thay vào đó là thuộc tính padding vì padding không có hiệu tượng này.
4. Lời Kết
Các bạn thân mến, Zaidap.com đã trình bài xong trường hợp đặc biệt của thuộc tính margin rồi. Hy vọng các bạn sẽ ứng dụng được vào trang web của mình.
Cảm ơn các bạn, hẹn gặp lại trong các bài viết sau.
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.
Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.
