浏览器给div无关的高度

Question

我正在写a php page，显示由较小的图块组成的大图像（7386x5186px）。有25行和25列瓷砖。每行为div.tileRow，所有图块均为div.tile s。

大多数瓷砖的高度为208px，但Chrome .tileRow的高度为212px，FF为213px。最后一行的牌是194px高，这就是为什么我不想给.tileRow一个固定的高度。我尝试了Inspect Element工具，但没有说明高度的来源。

<div id="mapContents">
    <?php 
    for ($i = 1; $i < 26; $i++) {
        echo "<div class='tileRow'>";
        for ($j = 1; $j < 26; $j++) {
            $imagedir = $basedir . "kaart/tiles/kaart_" . $i . "_" . $j . ".png";
            $imagesize = getimagesize($imagedir);
            echo "<div class='tile' style=\"background-image: url('". $imagedir . "'); width: ".$imagesize[0]."px; height: ".$imagesize[1]."px;\"></div>";
            //echo "<div id='tile_".$i."_".$j."' class='mapTile'></div>";
        }
        echo "</div>";
    }
    ?>
</div>

.tileRow {
    margin: 0;
    padding: 0;
}

.tile {
    display: inline-block;
    margin: 0;
    padding: 0;
}

边距和填充应该被中和，这就是为什么我无法弄清楚导致这种情况的原因。