Преднамеренная граница или перекрытие перекрытия наполовину для отзывчивого вида плитки

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; 
}