css - 折叠嵌套 DIV 的边框

Question

我在设置嵌套 DIV 的样式时遇到问题 ( see here for an example)。

我有一些动态呈现的嵌套 DIV(带有 class="box")，例如:

<div class="box" id="1">
  other content
  <div class="box" id="2">
    <div class="box" id="3">
    </div>
  </div>
  other content
  <div class="box" id="4">
  </div>
</div>
other content

我希望这些 DIV 在底部有一个边框:

<style>
div.box {border-bottom: solid 1px gray;}
</style>

问题是，当两个嵌套 DIV 的底部边界相邻时(例如框 2 和 3 或框 1 和 4)，结果是一条 2(或更多像素)高的灰线。

如果嵌套 DIV 相邻，是否可以折叠它们的边界？

我尝试添加 border-collapse: collapse，但没有帮助。

Answer 1

border-collapse属性仅适用于 table 和 inline-table 元素。

尝试将 margin-bottom 属性添加到具有负值的 .box 元素以重叠边框，如下所示:

Example Here

div.box {
    border-bottom: solid 1px gray;
    margin-bottom: -1px;
}