Javascript HTML/CSS:10x10等边分隔框，但由于某些原因，高度大于宽度

链接到JSFIDLE:

imgur澄清：

我用JavaScript创建了一个10x10的网格（div框），每个框有5px的边距。我期待一个完美的正方形出现，但出于某种原因，每个Y轴框之间的距离是13像素，而不是10像素（因为5px边距+5px边距=10px）

一些CSS代码片段：

.sketchbox {
  width:20px;
  height:20px;
  background-color:white;
  border: 1px solid black;
  display:inline-block;
  margin:5px;
}

br {
  line-height: 0px;
  margin:0px;
  padding:0px;
}

我怀疑这与我使用的换行符有关，但我尝试将换行符更改为0px的每一个CSS都没有效果

有人能帮忙吗？

---

谢谢

更改

内联块

元素的

垂直对齐

属性。在本例中，

.sketchbox

您可以尝试

垂直对齐：top

---

当值为

baseline

（默认值）时，会为字母j、q、y保留一个垂直空间。

非常感谢！我不知道有这样的财产，但它确实有道理。您的解决方案非常有效！

.sketchbox {
    width: 20px;
    height: 20px;
    background-color: white;
    border: 1px solid black;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
}