HTML divs grid - 行之间不需要的空格

Question

我正在尝试构建div s的简单网格：（live demo here）

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; CSS中写上.cell。写得像

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

选中此http://jsfiddle.net/cSWnb/6/

Answer 2

这些设置都符合预期，因此不清楚您的目标是什么。

您可以改为使用边距，而不是设置行高。边距是导致块元素之间空间的原因。

对于最后一项，请尝试将div的宽度设置为auto。