折叠嵌套DIV的边框

Question

我在设计嵌套DIV时遇到了问题(请参阅此处的示例).

我有一些class="box"动态渲染的嵌套DIV(with ),例如:

<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-collapseproperty仅适用于table和inline-table元素.

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

这里的例子

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