css - 有意的边框或填充在中途重叠以实现响应式平铺视图

Question

我正在使用响应式布局，其中容器具有任意数量的“图块”，这些“图块”会根据使用媒体查询的屏幕大小自动调整其基于百分比的宽度。

每个图块都有一个 10 像素的边框，我正在寻找一种可靠的方法来确保始终有 10 像素的边框。如果我将边框设置为 10 像素，那么相邻的图块之间最终会有 20 像素。如果我看到它到 5px，边缘图块最终的边框比其他部分更薄，等等。

有什么好方法可以设置瓷砖的样式以使边框重叠一半，而不必使用javascript不断调整边缘瓷砖？

注意：我使用了一种width: %用于瓷砖宽度和padding-bottom: %高度的技术。这是一种有效的技术，因为填充底部是基于宽度的。如果您看到相同的值，它将是完美的正方形。

Answer 1

答案如下：

ul#container{
     border: 5px solid white; /*Half border*/
}

ul#container li.tile {
     outline: 10px solid white;  /*Full border*/
     outline-offset: -5px solid white;  /*Negative Half border*/
}

我发现在我的情况下效果更好的另一种方法（决定使用 isotope.js 响应式磁贴）如下：

li.tile {
    border: 10px solid white;
    margin-right: -10px; 
    margin-bottom: -10px;
}