Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Margin collapsing trong CSS
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, freetuts 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
Bài viết này được đăng tại [free tuts .net]
<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, freetuts đã 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.
