Why does the container lose 10px height?

Question

I have the following code which is basically a container that has a width and is then filled up with squares so there is an equal number of squares accorss and down:

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>

My question is why does the .container lose 10px in height (if you inspect element it is only 950px high), even though the squares inside are square, there is an equal number vertically and horizontally and the row fills up the full 960px?

I've just checked and this only seems to occur in chrome

Answer 1

Because you can only draw at full pixels. The height of each square is rounded from 38.4px down to 38px. 25 * 38px = 950px.