HTML divs grid - unwanted space between rows

Question

I'm trying to build a simple grid of divs: (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;
}

But, the result looks like this:

enter image description here

QUESTION: What causes this space between rows?

One possible solution is:

.row {
    height: 30px;
}

enter image description here

Also, to get rid of the extra space on the right hand side, I could add:

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

enter image description here

However, I wonder if there is a better solution which doesn't require setting the width/height in pixels.

Do you have any other ideas?

score 4 · Accepted Answer · answered Mar 25 '12 at 05:48

4

Write like vertical-align: top; in your .cell CSS. Write like

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

Check this http://jsfiddle.net/cSWnb/6/

answered Mar 25 '12 at 05:48

sandeep

91,313
23
137
155

That's interesting. It works when width and height are 30px, but doesn't work if they are small enough, e.g. 10px: http://jsfiddle.net/cSWnb/9/ – Misha Moroshko Mar 25 '12 at 08:07
My second problem is to get rid of the red space at the right hand side without setting board's width in pixels. – Misha Moroshko Mar 25 '12 at 08:08
write vertical-align:top & font-size:0; in .row CSS. Check this http://jsfiddle.net/cSWnb/24/ – sandeep Mar 25 '12 at 11:19
`font-size:0` means that I can't put any text in the cells. I don't want make this assumption. – Misha Moroshko Mar 25 '12 at 23:27
that's why i give his child font-size:15px;. write a text on it. It's make no problem to it. – sandeep Mar 26 '12 at 03:44

score 0 · Answer 2 · answered Mar 25 '12 at 05:44

0

These settings are all behaving as expected so it's not clear exactly what you are hoping for.

Instead of setting the row height, you might instead play with the margins. Margins are what cause the space between block elements.

For the last item, try setting the width of the div to auto.

answered Mar 25 '12 at 05:44

Jonathan Wood

65,341
71
269
466

Try `div { margin-top: 0px; margin-bottom: 0px; }` – Jonathan Wood Mar 25 '12 at 05:50

HTML divs grid - unwanted space between rows

2 Answers2

Linked