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

Xem demo RUN
<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 margin-top cho c2 với giá trị lần lượt là 20px 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 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

Xem demo RUN
<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-top50px 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

Xem demo RUN
<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 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

Xem demo RUN
<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:

xem demo RUN
<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 c2 . Sau đó, bỏ thuộc tính margin đi, thay vào đó là thuộc tính padding 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.

Khóa học nên xem

Nguồn: freetuts.net