css - 防止 CSS 中的 "double"边框

Question

假设我有两个彼此相邻的 div(以 https://chrome.google.com/webstore/category/home 作为引用)并带有边框。

有没有办法(最好是 CSS 技巧)来防止我的 div 看起来像有双边框？看看这张图片以更好地理解我的意思:

你可以看到两个 div 相交的地方，看起来像是有一个双边框。

Answer 1

如果我们谈论的元素不能保证以任何特定顺序出现(可能一行中有 3 个元素，然后一行有 2 个元素，等等)，您需要可以放置在每个元素上的东西在集合中。该解决方案应涵盖:

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

请注意大纲不起作用in older browsers (IE7 及更早版本)。

或者，您可以坚持使用边框并使用负边距:

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}