Javascript div之间不需要的水平边距

我正在做井字游戏，由于某种原因，这些分区似乎有左边或右边的空白。无论如何，两个div之间有一个水平边距。我需要正方形彼此靠近。我怎样才能做到这一点

如果有人对它的外观感兴趣，请看这支笔：

正文{
背景色：#174c6d；
字体系列：verdana，无衬线；
颜色：白色；
}
h1{
字体大小：50px；
}
氢{
边缘底部：30px；
}
.集装箱{
保证金：0自动；
文本对齐：居中；
}
.行>分区{
边际：0px；
显示：内联块；
字体大小：40px；
宽度：70px；
高度：70像素；
文本对齐：居中；
填充：0px；
垂直对齐：顶部；
线高：70px；
}
.对{
右边框：实心5px白色；
}
.底部{
边框底部：实心5px白色；
}
.重置游戏{
字体大小：20px；
背景颜色：灰色；
}
#信息{
/*显示：内联块*/
文本对齐：居中；
}

信息：
重置游戏

您需要使用

字体大小：0

更准确的答案是


正文{
背景色：#174c6d；
字体系列：verdana，无衬线；
颜色：白色；
}
h1{
字体大小：50px；
}
氢{
边缘底部：30px；
}
.集装箱{
保证金：0自动；
文本对齐：居中；
}
.行{
字号：0；
}
.行>分区{
边际：0px；
显示：内联块；
字体大小：40px；
宽度：70px；
高度：70像素；
文本对齐：居中；
填充：0px；
垂直对齐：顶部；
线高：70px；
}
.对{
右边框：实心5px白色；
}
.底部{
边框底部：实心5px白色；
}
.重置游戏{
字体大小：20px；
背景颜色：灰色；
}
#信息{
/*显示：内联块*/
文本对齐：居中；
}

信息：
重置游戏
您需要使用
字体大小：0

更准确的答案是


正文{
背景色：#174c6d；
字体系列：verdana，无衬线；
颜色：白色；
}
h1{
字体大小：50px；
}
氢{
边缘底部：30px；
}
.集装箱{
保证金：0自动；
文本对齐：居中；
}
.行{
字号：0；
}
.行>分区{
边际：0px；
显示：内联块；
字体大小：40px；
宽度：70px；
高度：70像素；
文本对齐：居中；
填充：0px；
垂直对齐：顶部；
线高：70px；
}
.对{
右边框：实心5px白色；
}
.底部{
边框底部：实心5px白色；
}
.重置游戏{
字体大小：20px；
背景颜色：灰色；
}
#信息{
/*显示：内联块*/
文本对齐：居中；
}

信息：
重置游戏
换行和缩进导致div之间有空格

    <div id="0" class="square right bottom"></div>
    <div id="1" class="square right bottom"></div>
    <div id="2" class="square bottom"></div>



将此更改为类似以下内容：

    <div id="0" class="square right bottom"></div><!--
 --><div id="1" class="square right bottom"></div><!--
 --><div id="2" class="square bottom"></div>

换行和缩进导致div之间有空格

    <div id="0" class="square right bottom"></div>
    <div id="1" class="square right bottom"></div>
    <div id="2" class="square bottom"></div>



将此更改为类似以下内容：

    <div id="0" class="square right bottom"></div><!--
 --><div id="1" class="square right bottom"></div><!--
 --><div id="2" class="square bottom"></div>

这是由于HTML代码中div之间的换行符造成的空白

避免这种情况的一种方法是重新排列结束和开始的DIV标记，如下面我的代码片段所示。这样，在关闭
和随后打开
之间就没有空间了：


正文{
背景色：#174c6d；
字体系列：verdana，无衬线；
颜色：白色；
}
h1{
字体大小：50px；
}
氢{
边缘底部：30px；
}
.集装箱{
保证金：0自动；
文本对齐：居中；
}
.行>分区{
边际：0px；
显示：内联块；
字体大小：40px；
宽度：70px；
高度：70像素；
文本对齐：居中；
填充：0px；
垂直对齐：顶部；
线高：70px；
}
.对{
右边框：实心5px白色；
}
.底部{
边框底部：实心5px白色；
}
.重置游戏{
字体大小：20px；
背景颜色：灰色；
}
#信息{
/*显示：内联块*/
文本对齐：居中；
}

信息：
重置游戏
这是由于HTML代码中div之间的换行符造成的空白

避免这种情况的一种方法是重新排列结束和开始的DIV标记，如下面我的代码片段所示。这样，在关闭
和随后打开
之间就没有空间了：


正文{
背景色：#174c6d；
字体系列：verdana，无衬线；
颜色：白色；
}
h1{
字体大小：50px；
}
氢{
边缘底部：30px；
}
.集装箱{
保证金：0自动；
文本对齐：居中；
}
.行>分区{
边际：0px；
显示：内联块；
字体大小：40px；
宽度：70px；
高度：70像素；
文本对齐：居中；
填充：0px；
垂直对齐：顶部；
线高：70px；
}
.对{
右边框：实心5px白色；
}
.底部{
边框底部：实心5px白色；
}
.重置游戏{
字体大小：20px；
背景颜色：灰色；
}
#信息{
/*显示：内联块*/
文本对齐：居中；
}

信息：
重置游戏
只需将
字体大小：0
添加到每行：


正文{
背景色：#174c6d；
字体系列：verdana，无衬线；
颜色：白色；
}
h1{
字体大小：50px；
}
氢{
边缘底部：30px；
}
.集装箱{
保证金：0自动；
文本对齐：居中；
}
/*增加*/
.行{
字号：0；
}
/*CSS*/
.行>分区{
边际：0px；
显示：内联块；
字体大小：40px；
宽度：70px；
高度：70像素