Có cách nào để vô hiệu hóa sụp đổ biên hoàn toàn không? Các giải pháp duy nhất tôi đã tìm thấy (theo tên "unollapsing") đòi hỏi phải sử dụng đường viền 1px hoặc đệm 1px. Tôi thấy điều này không thể chấp nhận được: pixel ngoại lai làm phức tạp các tính toán mà không có lý do chính đáng. Có cách nào hợp lý hơn để vô hiệu hóa sự sụp đổ lề này không?

Có hai loại sụp đổ lề chính:

• Thu hẹp lề giữa các yếu tố liền kề
• Thu gọn lề giữa các yếu tố cha mẹ và con

Sử dụng một miếng đệm hoặc đường viền sẽ ngăn chặn sự sụp đổ chỉ trong trường hợp sau. Ngoài ra, bất kỳ giá trị nào overflowkhác với giá trị mặc định ( visible) được áp dụng cho cha mẹ sẽ ngăn chặn sự sụp đổ. Như vậy, cả hai overflow: autovà overflow: hiddensẽ có tác dụng như nhau. Có lẽ sự khác biệt duy nhất khi sử dụng hiddenlà hậu quả không lường trước của việc ẩn nội dung nếu cha mẹ có chiều cao cố định.

Các thuộc tính khác, một khi được áp dụng cho cha mẹ, có thể giúp khắc phục hành vi này là:

• float: left / right
• position: absolute
• display: inline-block / flex

Bạn có thể kiểm tra tất cả chúng ở đây: http://jsfiddle.net/XB9wX/1/ .

Tôi nên thêm rằng, như thường lệ, Internet Explorer là ngoại lệ. Cụ thể hơn, trong IE 7 lề không sụp đổ khi một số loại bố cục được chỉ định cho phần tử cha, chẳng hạn như width.

Nguồn: Bài viết của Sitepoint Thu gọn lề

Bạn cũng có thể sử dụng thuật ngữ rõ ràng cũ tốt cho việc này.

#container:before, #container:after{
    content: ' ';
    display: table;
}

Xem fiddle cập nhật: http://jsfiddle.net/XB9wX/97/

Một mẹo nhỏ để vô hiệu hóa thu hẹp lề không có tác động trực quan, theo như tôi biết, là đặt phần đệm của cha mẹ thành 0.05px:

.parentClass {
    padding: 0.05px;
}

Phần đệm không còn là 0 nên việc sập sẽ không còn xảy ra nữa, nhưng đồng thời phần đệm đủ nhỏ để trực quan nó sẽ làm tròn xuống 0.

Nếu một số phần đệm khác là mong muốn, thì chỉ áp dụng phần đệm cho "hướng" trong đó thu hẹp lề không mong muốn, chẳng hạn padding-top: 0.05px;.

Ví dụ làm việc:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

Chỉnh sửa: thay đổi giá trị từ 0.1thành 0.05. Như Chris Morgan đã đề cập trong một bình luận dưới đây, và từ bài kiểm tra nhỏ này , có vẻ như thực sự Firefox đã 0.1pxxem xét phần đệm. Mặc dù, 0.05pxdường như để làm các mẹo.

overflow:hidden ngăn chặn sự sụp đổ lợi nhuận nhưng nó không có tác dụng phụ - cụ thể là nó ... che giấu tràn.

Ngoài hình thức này và những gì bạn đã đề cập, bạn chỉ cần học trực tiếp với nó và học cho ngày hôm nay khi chúng thực sự hữu ích (cứ sau 3 đến 5 năm).

Trên thực tế, có một hoạt động hoàn hảo:

hiển thị: flex; hướng flex: cột;

miễn là bạn có thể sống với chỉ hỗ trợ IE10 trở lên

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Mỗi trình duyệt dựa trên webkit nên hỗ trợ các thuộc tính -webkit-margin-collapse. Ngoài ra còn có các sản phẩm phụ để chỉ đặt nó cho lề trên hoặc dưới. Bạn có thể cung cấp cho nó giá trị thu gọn (mặc định), loại bỏ (đặt lề thành 0 nếu có lề lân cận) và tách biệt (ngăn chặn thu hẹp lề).

Tôi đã thử nghiệm tính năng này hoạt động trên các phiên bản 2014 của Chrome và Safari. Thật không may, tôi không nghĩ rằng điều này sẽ được hỗ trợ trong IE vì nó không dựa trên webkit.

Đọc tài liệu tham khảo Safari Safari của Apple để được giải thích đầy đủ.

Nếu bạn kiểm tra trang tiện ích mở rộng webkit CSS của Mozilla , họ sẽ liệt kê các thuộc tính này là độc quyền và khuyên không nên sử dụng chúng. Điều này là do họ có thể sẽ không đi vào CSS tiêu chuẩn sớm và chỉ các trình duyệt dựa trên webkit mới hỗ trợ họ.

Tôi biết rằng đây là một bài viết rất cũ nhưng chỉ muốn nói rằng sử dụng flexbox trên phần tử cha sẽ vô hiệu hóa thu gọn lề cho các phần tử con của nó.

Tôi gặp vấn đề tương tự với sự sụp đổ lề vì cha mẹ đã positionđặt thành tương đối. Dưới đây là danh sách các lệnh bạn có thể sử dụng để vô hiệu hóa thu hẹp lề.

ĐÂY LÀ CHƠI TRÒ CHƠI

Chỉ cần cố gắng gán bất kỳ parent-fix*lớp để div.containeryếu tố, hoặc bất kỳ lớp children-fix*để div.margin. Chọn một trong những phù hợp với nhu cầu của bạn tốt nhất.

Khi nào

• lề sụp đổ là người khuyết tật , div.absolutevới nền đỏ sẽ được bố trí ở phía trên cùng của trang.
• lề đang sụp đổ div.absolute sẽ được định vị tại cùng tọa độ Y nhưdiv.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

Dưới đây là jsFiddle với ví dụ bạn có thể chỉnh sửa

Trong trình duyệt mới hơn (không bao gồm IE11), một giải pháp đơn giản để ngăn chặn sự sụp đổ lề cha-con là sử dụng display: flow-root. Tuy nhiên, bạn vẫn sẽ cần các kỹ thuật khác để ngăn chặn sự sụp đổ của phần tử liền kề.

DEMO (trước)

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

DEMO (sau)

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Để biết thông tin của bạn, bạn có thể sử dụng lưới nhưng có tác dụng phụ :)

.parent {
  display: grid
}