Javascript 为什么表格高度大于单元格高度之和？

我不知道我的问题是简单还是幼稚，但我仍在学习javascript，所以请宽容我

我的一个练习是创建一个具有特定宽度和高度的DIV元素，然后使用javascript尝试在这个DIV中生成表。我认为这是一个简单的问题，只需将父DIV的宽度和高度除以列数和行数即可。我发现，在水平方向上这很好，但在垂直方向上，表格高度大于单元格高度之和

假设div高度为407px。这意味着单元高度（假设15行）应为27,13px。桌子的总高度应为15*27,13=407px。但是

table.clientWidth

在chrome中提供了420px，在IE10中提供了453px

我考虑过可能会考虑的边界，但为什么我会得到正确的宽度？我尝试使用

getComputedStyle（）

方法代替

element.clientWidth

，但结果相同。然后我读了关于逻辑像素和物理像素的文章，但这并没有什么帮助。我不明白为什么这段代码会这样？我错过了什么

我的HTML

我的JavaScript

var createGrid=function（行、列、附录）{
var appendTo=document.getElementById（appendToID）；
var appendToWidth=appendTo.clientWidth；
var appendToHeight=appendTo.clientHeight；
var cellWidth=（appendToWidth-16）/cols；
var cellHeight=appendToHeight/行；
var table=document.createElement（'table'）；
对于（var i=1；i将高度放在行而不是单元格上：

row.style.height = cellHeight+"px";

这确实与添加到div大小的
边框有关。我建议您查看css属性
框大小
，尤其是它的
边框框
值。这会调整与您在其上设置的边框相关的大小

将其添加到单元格中，如下所示：
cell.style['box-sizing']='border-box'；
您将看到一个完全不同的结果。单元格的高度现在应考虑您在其上设置的边框。从而使单元格适合表格的总高度

您可以找到有关边框和框模型的更多信息。
表格的实际高度为：21px*20个单元格+21px（边框）=441px。边框的值为21px，因为您为表格添加了
边框折叠：折叠；
。没有这个值，高度为502px。
实际上，每个单元格都有21px高度，但也有边框。表格高度为：21px*20个单元格+21px。
var createGrid = function(rows, cols, appendToID){
  var appendTo = document.getElementById(appendToID); 
  var appendToWidth = appendTo.clientWidth;  
  var appendToHeight = appendTo.clientHeight;  
  var cellWidth = (appendToWidth-16)/cols;  
  var cellHeight = appendToHeight/rows;
  var table = document.createElement('table');  
  for(var i=1; i<=rows; i++){
    var row = document.createElement('tr');
    for(var j=1; j<=cols; j++){
      var cell = document.createElement('td');
      cell.style.background = 'white';
      cell.style.padding = '0px';
      cell.style.margin = '0px';
      cell.style.border = "1px solid blue";
      cell.style.width = cellWidth+"px";
      cell.style.height = cellHeight+"px";
      row.appendChild(cell);
      console.log("all ok");
    }    
    table.appendChild(row);    
  }
  table.style.borderCollapse = "collapse";
  table.style.border = '1px';
  appendTo.appendChild(table);
}
createGrid(15, 11, "target");

row.style.height = cellHeight+"px";