Question

如何在不删除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。但是这样，如果我改变边框厚度，我也必须改变margin-top和margin-bottom。另一种方法是设置：

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

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

Answer 1

对于示例的有限范围，您可以简单地指定具有类bordered的元素不应该具有border-top，如果它紧接在具有相同类的元素之前，则使用{ {3}}，+：

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

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

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

1 个答案: