css - レスポンシブ タイル ビューの意図的な境界線またはパディングが途中で重なっています

Question

私は、メディア クエリを使用して、画面サイズに応じてパーセンテージ ベースの幅を自動的に調整する任意の数の「タイル」がコンテナーに含まれるレスポンシブ レイアウトを使用しています。

各タイルには 10 ピクセルの境界線があり、常に 10 ピクセルの境界線があることを保証する信頼できる方法を探しています。境界線を 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;
}