CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top