HTML grille divs - espace indésirable entre les lignes

Question

Je suis en train de construire une grille simple 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; 
} 

Mais, le résultat ressemble à ceci:

QUESTION: Quelles sont les causes de cet espace entre les lignes?

Une solution possible est:

.row { 
    height: 30px; 
} 

De plus, pour se débarrasser de l'espace supplémentaire sur le côté droit, je pourrais ajouter:

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

Cependant, je me demande s'il y a une meilleure solution w Il n'est pas nécessaire de régler la largeur/hauteur en pixels.

Avez-vous d'autres idées?

Answer 1

Ecrivez comme vertical-align: top; dans votre CSS .cell. Écrivez comme

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

Cocher cette http://jsfiddle.net/cSWnb/6/

Answer 2

Ces paramètres se comportent tous comme prévu, vous ne savez donc pas exactement ce que vous espérez. Au lieu de définir la hauteur de ligne, vous pouvez jouer avec les marges. Les marges sont ce qui cause l'espace entre les éléments du bloc.

Pour le dernier élément, essayez de définir la largeur de la div sur auto.