折叠相邻元素的垂直边框？答案

【问题标题】：Collapse vertical borders of adjacent elements?折叠相邻元素的垂直边框？
【发布时间】：2015-04-11 15:09:06
【问题描述】：

如何在不移除border-top/border-bottom的情况下折叠两个相邻元素的垂直边框？

例如：

<style type="text/css">
.bordered {
    border:1px solid #000000;
}
</style>
...
<body>
    <div class="bordered">bordered_1</div>
    <div class="bordered">bordered_2</div>
</body>

我发现的一种方法是添加

margin-top:-1px;
margin-bottom:-1px;

到.bordered。但是这样如果我改变边框厚度我也必须改变边距顶部和边距底部。另一种方式是设置：

body {
    display:table;
    border-collapse:collapse;
}
.bordered {
    display:table-row;
    border:1px solid #000000;
}

它似乎具有良好的浏览器兼容性（在 IE 9、FF、Chrome 上测试），但它是一种 hacky 类型的代码。有没有更优雅的方式？

【问题讨论】：

使用 hacky 方式 做 hacky 工作 有什么问题？
为什么你不想删除一些边框？对我来说，它似乎比使用 display: table on body 更 hacky。
另一种解决方案可以是margin-top:-1px;，带有一个js生成的值
什么“骇人的工作”？我问了一个关于如何解决任务的问题，我看不出有什么不寻常的地方。我不想删除边框，因为我对任何应该有边框的元素使用“.bordered”，并且这些元素可能不与另一个有边框的元素相邻。
负边距比表格布局 IMO 更 hacky，考虑到这种事情是表格布局 的工作原理，而您必须跳过许多圈才能迎合负面边距。如前所述，最简单的方法是仅在一侧为除一个元素之外的所有元素指定边框。

标签： html css

【解决方案1】：

对于您的示例的有限范围，您可以简单地指定具有类bordered 的元素不应该有border-top，如果它紧跟在具有相同类的元素之前，使用adjacent sibling combinator，@ 987654324@:

.bordered {
    border:1px solid #000000;
}
.bordered + .bordered {
    border-top:0 none;
}

<div class="bordered">bordered_1</div>
<div class="bordered">bordered_2</div>

【讨论】：

这很好用，但只有零垂直边距。
这就是为什么我在整个答案前面加上 “对于您的示例的有限范围” ...如果您在要求中包含垂直边距，那么我实际上并没有看看在这些条件下“崩溃的边界”有什么意义？如果两个元素之间有一个边距，那么两个元素之间的“折叠”边框会是什么样子？
如果其中一个元素有边距，那么它们不会折叠并且会以单独的边框呈现，就像表格中的表格单元格使用边框折叠：分离一样。关键是：有时两个元素是相邻的并且没有边距——在这种情况下它们的边界应该折叠。但是，当至少其中一个具有垂直边距或它们不相邻时 - 在这种情况下，它们中的每一个都应该使用自己的边框进行渲染。基本上尝试想象所有块元素都有“border-collapse”css属性的实现。
啊，好的。好吧，不，这不适用于这种方法——没有办法“查询”两个元素是否被边距分开。并让它们显示为table-row 元素，以便您可以使用border-collapse 在这种情况下也不会真正起作用，因为margin-top/-bottom 不适用于按照 CSS 2.1 规范的此类元素。
但我认为这些元素是否首先获得边距必须基于某种与内容相关的决定（？）——因此给它们相应的特定类不应该超出题。然后这些类可用于在必要时设置带或不带边框的格式。