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;也将换行符视为空格。

Answer 2

当你使用内联块并且源代码中有空格时，输出中也会有空格。

将所有div放在一行中以解决此问题。

另一个解决方案是将所有元素设置为display:block，然后将float:left设置为它们，如下所示：

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

请参阅demo。

另一件值得一提的是，您可以保护整个“字符串”以在变量中创建迷宫，并立即添加所有元素。看看我的演示，看看我的意思。这将使您的迷宫更具可扩展性，整个创作过程更加高效。

div行之间无法追踪的空白

2 个答案: