отображать как ячейку таблицы

Question

Я играю с display свойствами, пытаясь освоить их.

Один вопрос, который у меня возник, заключался в том, как определить расстояние между ячейками таблицы.Прямо сейчас у меня есть 4 изображения, которые связаны друг с другом.Я хочу, чтобы они были плотно с левой стороны, но расстояние между ними.Так что даже расстояние везде, кроме левого.Я пытался использовать border-spacing: 5px;, но это добавило интервал слева.

Я поместил версию в jsfiddle, но ее рендеринг связан с другой проблемой.В jsfiddle показывается пространство между строками.Не уверен, почему это происходит, потому что он работает правильно в браузере.

http://jsfiddle.net/chapster11/RjGaX/

Answer 1

Вам нужно добавить padding:5px 5px 5px 0; к #displayWrapper #grid .gridImage, чтобы получить четное заполнение.

Это правило гласит: добавьте 5px из padding к top, right и bottom и 0 padding к left.

Добавьте img {vertical-align:bottom;}, чтобы исправить лишнее пространство внизу.

http://jsfiddle.net/jasongennaro/RjGaX/3/

Answer 2

добавить отображение: блок; к img

Answer 3

Вам нужно установить border-collapse:separate;, чтобы ваш border-spacing действительно находился между границами двух ячеек.