html - div 行之间无法追踪的空白

Question

我试图用 JavaScript“画”一个迷宫，但我的输出图有一些空白，我不明白它从哪里来。

HTML

<div id="maze" style="height: 60px; width: 90px;">
    <div class="tile wall"></div>
    <div class="tile wall"></div>
    <div class="tile"></div>
    <div class="tile wall"></div>
    <div class="tile wall"></div>
    ...
</div>

CSS

div {
    display: inline-block;
}

.tile {
    width: 10px;
    height: 10px;
    background: lightgrey;
}

它从哪里来，我该如何摆脱它？

FIDDLE

Answer 1

只需将 #maze {font-size: 0;} 添加到您的 CSS，就可以了。display: inline-block; 也将换行符视为空格。