Html 动态添加的内联块div具有错误的垂直间距

我有一个包含一系列块的HTML模板，这些块只是内联块。最初，许多块作为模板的一部分进行渲染，但用户可以添加额外的块，然后动态附加这些块

我的问题是，动态添加的块与预渲染块的间距不同

看看这把小提琴：

很明显，由Javascript代码动态添加的块不会垂直排列

HTML:

罪魁祸首似乎是固有的、不可见的字符间距，因为内联块使元素的行为有点像文本。在blocks元素上设置字体大小：0将神奇地解决这个问题。但是，必须调整div.blocks元素中包含的文本的字体大小

有人对此有好的解决办法吗

浮动元素，如浮动：左；这不是一个理想的选择。

---

这是因为HTML中的每个div之间都有一个新行。这使浏览器认为需要在每个元素之间添加一个空间

删除间距或添加字体大小：0；给你的父母

选择1的小提琴：

选择2的小提琴：

---

这是因为HTML中的每个div之间都有新行。这使浏览器认为需要在每个元素之间添加一个空间

删除间距或添加字体大小：0；给你的父母

选择1的小提琴：

选择2的小提琴：

在blocks div上使用flexbox，就这样

#blocks {
    display: flex;
    flex-wrap: wrap;
}

请参阅小提琴。

在blocks div上使用flexbox，就这样

#blocks {
    display: flex;
    flex-wrap: wrap;
}

请参阅fiddle。

您好，请尝试此代码

#blocks {
  width:140px;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  *word-spacing: -0.43em;
}
#blocks .block {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    width:20px;
    height:20px;
    margin: 0 5px 5px;
    border:1px solid red;
    background:1px solid #777;
}

问候：

您好，请尝试此代码

#blocks {
  width:140px;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  *word-spacing: -0.43em;
}
#blocks .block {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    width:20px;
    height:20px;
    margin: 0 5px 5px;
    border:1px solid red;
    background:1px solid #777;
}

---

注意：

try min height in blocks div.block{}try min height in blocks div.block{}在我看来，摆弄字母间距比仅仅将字体大小设置为零更令人讨厌。但谢谢：在我看来，摆弄字母间距比仅仅将字体大小设置为零要糟糕一些。但是谢谢你：啊。当然因此，事实上，是静态的，即不是动态添加的元素具有错误的间距。漂亮。谢谢你的回答啊。当然因此，事实上，是静态的，即不是动态添加的元素具有错误的间距。漂亮。谢谢你的回答不过，似乎IE对这件事很反感：毫不奇怪。我想字体大小：0真的是全球覆盖的好办法。IE似乎对此大惊小怪，不过：毫不奇怪。我想字体大小：0确实是实现全球覆盖的途径。