如何禁用边缘崩溃？

Question

如何禁用边缘崩溃？有没有办法完全阻止保证金崩溃？我找到的唯一解决方案(名为“未折叠”)是使用1 px边框或1 px填充。我认为这是不可接受的：多余的像素没有很好的理由使计算变得复杂。有更合理的方法来阻止这种边缘崩溃吗？

Answer 1

据我所知，禁用没有视觉影响的边距崩溃的一个巧妙的技巧是将父进程的填充设置为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西梅斯来做这个把戏。