มีวิธีปิดใช้งานการยุบขอบทั้งหมดหรือไม่ วิธีแก้ปัญหาเดียวที่ฉันพบ (โดยใช้ชื่อ "uncollapsing") เกี่ยวข้องกับการใช้ 1px border หรือ 1px padding ฉันพบสิ่งที่ยอมรับไม่ได้: พิกเซลที่ไม่เกี่ยวข้องนั้นทำให้การคำนวณซับซ้อนขึ้นโดยไม่มีเหตุผลที่ดี มีวิธีที่เหมาะสมกว่าในการปิดใช้งานการยุบขอบนี้หรือไม่

การยุบระยะขอบมีสองประเภทหลัก:

• การยุบระยะขอบระหว่างองค์ประกอบที่อยู่ติดกัน
• การยุบระยะขอบระหว่างองค์ประกอบหลักและองค์ประกอบย่อย

การใช้ช่องว่างภายในหรือเส้นขอบจะป้องกันการยุบในกรณีหลังเท่านั้น นอกจากนี้ค่าใด ๆ ที่overflowแตกต่างจากค่าเริ่มต้น ( visible) ที่ใช้กับพาเรนต์จะป้องกันการยุบ ดังนั้นทั้งoverflow: autoและoverflow: hiddenจะมีผลเช่นเดียวกัน บางทีความแตกต่างเพียงอย่างเดียวเมื่อใช้hiddenเป็นผลมาจากการซ่อนเนื้อหาถ้าผู้ปกครองมีความสูงคงที่

คุณสมบัติอื่น ๆ ที่เมื่อนำไปใช้กับผู้ปกครองสามารถช่วยแก้ไขพฤติกรรมนี้คือ:

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

คุณสามารถทดสอบทั้งหมดของพวกเขาที่นี่: http://jsfiddle.net/XB9wX/1/

ฉันควรเพิ่มสิ่งนั้นตามปกติ Internet Explorer เป็นข้อยกเว้น โดยเฉพาะอย่างยิ่งใน IE 7 widthอัตรากำไรขั้นต้นไม่ยุบเมื่อชนิดของรูปแบบบางอย่างที่ระบุไว้สำหรับองค์ประกอบหลักเช่น

แหล่งที่มา: บทความของ Sitepoint Margin Margins

คุณยังสามารถใช้ micro clearfix แบบเก่าที่ดีสำหรับเรื่องนี้

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

ดูซอที่อัพเดท: http://jsfiddle.net/XB9wX/97/

เคล็ดลับอย่างหนึ่งในการปิดใช้งานการยุบขอบที่ไม่มีผลกระทบต่อภาพเท่าที่ฉันรู้คือการตั้งค่าการเติมเต็มของพาเรนต์เป็น0.05px:

.parentClass {
    padding: 0.05px;
}

การซ้อนไม่มี 0 อีกต่อไปดังนั้นการยุบจะไม่เกิดขึ้นอีก แต่ในขณะเดียวกันการขยายมีขนาดเล็กพอที่จะทำให้การมองเห็นลดลงเป็น 0

หากมีช่องว่างอื่น ๆ ที่เป็นที่ต้องการแล้วใช้ช่องว่างภายในเท่านั้นที่จะ "ทิศทาง" padding-top: 0.05px;ซึ่งมีอัตรากำไรยุบไม่ได้ต้องการเช่น

ตัวอย่างการทำงาน:

.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>

แก้ไข:เปลี่ยนค่าจากไป0.1 0.05ดังที่คริสมอร์แกนพูดถึงในคอมเมนต์เบลล์และจากการทดสอบขนาดเล็กนี้ดูเหมือนว่าแน่นอนว่า Firefox จะ0.1pxคำนึงถึงการพิจารณา แม้ว่า0.05pxดูเหมือนจะทำเคล็ดลับ

overflow:hidden ป้องกันการยุบของขอบ แต่มันไม่มีผลข้างเคียง - นั่นคือ ... ซ่อนล้น

นอกเหนือจากสิ่งนี้และสิ่งที่คุณพูดถึงคุณเพียงแค่ต้องเรียนรู้ที่จะอยู่กับมันและเรียนรู้ในวันนี้เมื่อพวกเขามีประโยชน์จริง ๆ (มาทุก 3 ถึง 5 ปี)

จริงๆแล้วมีสิ่งหนึ่งที่ทำงานได้อย่างไร้ที่ติ:

แสดงผล: ดิ้น; ดิ้นทิศทาง: คอลัมน์;

ตราบใดที่คุณสามารถอยู่ได้ด้วยการรองรับ IE10 ขึ้นไป

.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>

ทุกเบราว์เซอร์ WebKit -webkit-margin-collapseตามควรสนับสนุนคุณสมบัติ นอกจากนี้ยังมีคุณสมบัติย่อยเพื่อตั้งค่าเฉพาะสำหรับระยะขอบด้านบนหรือด้านล่าง คุณสามารถให้ค่ายุบ (ค่าเริ่มต้น), ทิ้ง (ตั้งค่าระยะขอบเป็น 0 หากมีระยะขอบใกล้เคียง) และแยก (ป้องกันการยุบขอบ)

ฉันได้ทำการทดสอบแล้วว่าใช้งานได้กับ Chrome และ Safari เวอร์ชัน 2014 น่าเสียดายที่ฉันไม่คิดว่าจะรองรับ IE เพราะมันไม่ได้อยู่บนเว็บคิต

อ่านการอ้างอิง Safari Safari ของ Appleสำหรับคำอธิบายแบบเต็ม

หากคุณตรวจสอบหน้าส่วนขยาย CSS webkit ของ Mozillaพวกเขาจะแสดงรายการคุณสมบัติเหล่านี้ว่าเป็นกรรมสิทธิ์และไม่แนะนำให้ใช้ นี่เป็นเพราะพวกเขามีแนวโน้มที่จะไม่เข้าสู่ CSS มาตรฐานทุกเวลาเร็ว ๆ นี้และมีเพียงเบราว์เซอร์ที่ใช้ webkit เท่านั้นที่จะสนับสนุนพวกเขา

ฉันรู้ว่านี่เป็นโพสต์ที่เก่ามาก แต่แค่อยากจะบอกว่าการใช้ flexbox ในองค์ประกอบหลักจะปิดใช้งานการยุบขอบสำหรับองค์ประกอบย่อย

ฉันมีปัญหาที่คล้ายกันกับการยุบขอบเนื่องจากผู้ปกครองpositionตั้งค่าให้ญาติ นี่คือรายการคำสั่งที่คุณสามารถใช้เพื่อปิดใช้งานการยุบขอบ

นี่คือสนามเด็กเล่นเพื่อทดสอบ

เพียงแค่พยายามที่จะกำหนดใด ๆparent-fix*ชั้นdiv.containerองค์ประกอบหรือระดับใดเพื่อchildren-fix* div.marginเลือกหนึ่งที่เหมาะกับความต้องการของคุณที่สุด

เมื่อไหร่

• การยุบขอบถูกปิดใช้งานโดยdiv.absoluteมีพื้นหลังสีแดงจะถูกวางตำแหน่งที่ด้านบนสุดของหน้า
• ระยะขอบกำลังยุบ div.absoluteจะถูกวางตำแหน่งที่พิกัด Y เดียวกันกับ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>

นี่คือjsFiddleพร้อมตัวอย่างที่คุณสามารถแก้ไขได้

ในเบราว์เซอร์รุ่นใหม่ (ไม่รวม IE11) display: flow-rootวิธีง่ายๆเพื่อป้องกันไม่ให้อัตรากำไรขั้นต้นผู้ปกครองเด็กยุบคือการใช้งาน อย่างไรก็ตามคุณยังคงต้องการเทคนิคอื่น ๆ เพื่อป้องกันการยุบองค์ประกอบที่อยู่ติดกัน

DEMO (ก่อนหน้า)

.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 (หลัง)

.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>

สำหรับข้อมูลของคุณคุณสามารถใช้กริด แต่มีผลข้างเคียง :)

.parent {
  display: grid
}