HTML divs grid - нежелательное пространство между строками

Question

Я пытаюсь построить простую сетку из div s: ( живое демо здесь )

HTML:

<div class="board"></div>

JS:

$(function() {
    var boardHTML = '';

    for (var r = 0; r < 2; r++) {
        var row = '<div class="row">';

        for (var c = 0; c < 5; c++) {
            row += '<div class="cell"></div>';
        }

        row += '</div>';
        boardHTML += row;
    }

    $('.board').append(boardHTML);
});

CSS:

.cell {
    width: 30px;
    height: 30px;
    outline: 1px solid black;
    display: inline-block;
}
.row {
    background-color: red;
}

Но результат выглядит так:

ВОПРОС: Чтовызывает это пространство между строками?

Одним из возможных решений является:

.row {
    height: 30px;
}

Кроме того, чтобы избавиться от дополнительного пространства на правой стороне,Я мог бы добавить:

.board {
    width: 150px; /*   5 * 30px   */
}

Однако мне интересно, есть ли лучшее решение, которое не требует установки ширины / высоты в пикселях.

У вас есть другие идеи?

Answer 1

Напишите как vertical-align: top; в вашем .cell CSS.Напишите как

.cell {
    display: inline-block;
    height: 30px;
    outline: 1px solid black;
    vertical-align: top;
    width: 30px;
}

Проверьте это http://jsfiddle.net/cSWnb/6/

Answer 2

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

Вместо того, чтобы устанавливать высоту строки, вы могли бы вместо этого поиграть с полями.Поля - это то, что приводит к пробелу между элементами блока.

Для последнего элемента попробуйте установить ширину div в значение auto.