故意邊框或填充在響應式平鋪視圖的中途重疊

Question

我正在使用響應式佈局，其中容器具有任意數量的「平鋪」，可根據使用媒體查詢的屏幕尺寸自動調整基於百分比的寬度。

每個瓷磚都有一個10px的邊框，我正在尋找一種可靠的方法來確保總是有10px的邊框。如果我將邊框設置爲10px，那麼相鄰的瓷磚之間最終會有20px。如果我看到它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; 
}