Tại sao thùng chứa mất chiều cao 10px?

Question

Tôi đã đoạn mã sau đó về cơ bản là một container có chiều rộng và sau đó được lấp đầy với hình vuông nên có một số lượng tương đương của hình vuông accorss và xuống:

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>

Câu hỏi của tôi là lý do tại sao .container mất 10px chiều cao (nếu bạn kiểm tra phần tử chỉ cao 950px), ngay cả khi hình vuông bên trong là hình vuông, có một số bằng nhau theo chiều dọc và chiều ngang và hàng lấp đầy đầy đủ 960px?

Tôi vừa mới kiểm tra và điều này dường như chỉ xảy ra ở chrome

Answer 1

Bởi vì bạn chỉ có thể vẽ ở pixel đầy đủ. Chiều cao của mỗi ô vuông được làm tròn từ 38,4px xuống còn 38px. 25 * 38px = 950px.