设置具有重叠边框的 div答案

【问题标题】：Set divs with overlapping borders设置具有重叠边框的 div
【发布时间】：2017-02-01 23:33:51
【问题描述】：

有没有一种简单的方法可以在divs 上重叠边框？

假设你有这个：

.box {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
}

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

您可以在divs 聚会上看到“双边框”。我只想在divs 之间显示一个1px 边框。

我知道您可以设置不同的类，但想知道一个更简单的解决方案。

为什么我的问题不同 好吧，我没有一个包裹在 div 周围的容器。因此，根据该答案，border-collapse:collapse 必须应用于父元素或包装元素。

【问题讨论】：

这可能不是最好的或“正确”的方法，但没有什么能阻止您将 div #2 设置为具有 -1px 的 margin-top。
How to make borders collapse (on a div)?的可能重复

标签： jquery html css

【解决方案1】：

您有几个通过 CSS 的选项。你可以这样做：

.box + .box {
    margin-top: -1px;
}

或者

.box + .box {
    border-top-width: 0px;
}

【讨论】：

【解决方案2】：

试试这个代码

<div class="container">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>


.box {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
  margin-bottom: -1px;
}

.box:last-child {
  margin-bottom: 0;
}

现场演示 - https://jsfiddle.net/8cc8hoxf/

【讨论】：