Perché il contenitore perde 10px di altezza?

Question

Ho il seguente codice che è fondamentalmente un contenitore che ha una larghezza e viene poi riempito con quadrati per cui v'è un numero uguale di quadrati accorss e giù:

var container = $('.container'), 
 
    numberOfSquares = 25, 
 
    squareSize = container.width()/numberOfSquares; 
 

 
for (var squares = 0; squares < numberOfSquares * numberOfSquares; squares++) { 
 
    $('<div class="gridSquare"></div>').appendTo(container); 
 
} 
 

 
$('.gridSquare').css({ 
 
    "height": squareSize + "px", 
 
    "width": squareSize + "px" 
 
});

.container { 
 
    width: 960px; 
 
} 
 
.gridSquare { 
 
    background-color: black; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"></div>

mia domanda è il motivo per cui lo .container perde 10px in altezza (se controlli l'elemento è alto solo 950px), anche se i quadrati all'interno sono quadrati, c'è un numero uguale in verticale e in orizzontale e la riga riempie l'intero 960px?

Ho appena controllato e questo sembra solo a verificarsi in cromo

Answer 1

Poiché è possibile disegnare solo in pixel pieni. L'altezza di ogni quadrato è arrotondata da 38,4 px a 38 px. 25 * 38 px = 950 px.