divs之间不需要的水平边距

Question

我从事tic tac toe游戏，并且出于某种原因，div似乎有左右边距。无论如何，divs之间有一个水平的边界。我需要正方形互相靠近。我怎样才能做到这一点？

这里的笔如果看到它的外观有人感兴趣：https://codepen.io/zentech/pen/xLRzGr

body { 
 
    background-color: #174c6d; 
 
    font-family: verdana, sans-serif; 
 
    color: white; 
 
} 
 

 
h1 { 
 
    font-size: 50px; 
 
} 
 

 
h2 { 
 
    margin-bottom: 30px; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.row>div { 
 
    margin: 0px; 
 
    display: inline-block; 
 
    font-size: 40px; 
 
    width: 70px; 
 
    height: 70px; 
 
    text-align: center; 
 
    padding: 0px; 
 
    vertical-align: top; 
 
    line-height: 70px; 
 
} 
 

 
.right { 
 
    border-right: solid 5px white; 
 
} 
 

 
.bottom { 
 
    border-bottom: solid 5px white; 
 
} 
 

 
.resetGame { 
 
    font-size: 20px; 
 
    background-color: gray; 
 
} 
 

 
#message { 
 
    /* display: inline-block; */ 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <!-- header --> 
 
    <div class="header"> 
 
    <img src="http://pctechtips.org/pics/header-logo-tictactoe.png"> 
 
    </div> 
 
    <div class="ticTacToe"> 
 
    <!-- first row (3 square) --> 
 
    <div class="row"> 
 
     <div id="0" class="square right bottom"></div> 
 
     <div id="1" class="square right bottom"></div> 
 
     <div id="2" class="square bottom"></div> 
 
    </div> 
 

 
    <!-- second row (3 square) --> 
 
    <div class="row"> 
 
     <div id="3" class="square right bottom"></div> 
 
     <div id="4" class="square right bottom"></div> 
 
     <div id="5" class="square bottom"></div> 
 
    </div> 
 

 
    <!-- third row (3 square) --> 
 
    <div class="row"> 
 
     <div id="6" class="square right"></div> 
 
     <div id="7" class="square right"></div> 
 
     <div id="8" class="square"></div> 
 
    </div> 
 
    </div> 
 
    <div class="controls"> 
 
    <h2 id="message">Message:</h2> 
 
    <button type="button" class="resetGame">Reset Game</button> 
 
    </div> 
 
</div>

Answer 1

您需要元素上使用font-size: 0;，包含您的内联元素。

更确切的答案是here。

body { 
 
    background-color: #174c6d; 
 
    font-family: verdana, sans-serif; 
 
    color: white; 
 
} 
 

 
h1 { 
 
    font-size: 50px; 
 
} 
 

 
h2 { 
 
    margin-bottom: 30px; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.row { 
 
    font-size: 0; 
 
} 
 
.row>div { 
 
    margin: 0px; 
 
    display: inline-block; 
 
    font-size: 40px; 
 
    width: 70px; 
 
    height: 70px; 
 
    text-align: center; 
 
    padding: 0px; 
 
    vertical-align: top; 
 
    line-height: 70px; 
 
} 
 

 
.right { 
 
    border-right: solid 5px white; 
 
} 
 

 
.bottom { 
 
    border-bottom: solid 5px white; 
 
} 
 

 
.resetGame { 
 
    font-size: 20px; 
 
    background-color: gray; 
 
} 
 

 
#message { 
 
    /* display: inline-block; */ 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <!-- header --> 
 
    <div class="header"> 
 
    <img src="http://pctechtips.org/pics/header-logo-tictactoe.png"> 
 
    </div> 
 
    <div class="ticTacToe"> 
 
    <!-- first row (3 square) --> 
 
    <div class="row"> 
 
     <div id="0" class="square right bottom"></div> 
 
     <div id="1" class="square right bottom"></div> 
 
     <div id="2" class="square bottom"></div> 
 
    </div> 
 

 
    <!-- second row (3 square) --> 
 
    <div class="row"> 
 
     <div id="3" class="square right bottom"></div> 
 
     <div id="4" class="square right bottom"></div> 
 
     <div id="5" class="square bottom"></div> 
 
    </div> 
 

 
    <!-- third row (3 square) --> 
 
    <div class="row"> 
 
     <div id="6" class="square right"></div> 
 
     <div id="7" class="square right"></div> 
 
     <div id="8" class="square"></div> 
 
    </div> 
 
    </div> 
 
    <div class="controls"> 
 
    <h2 id="message">Message:</h2> 
 
    <button type="button" class="resetGame">Reset Game</button> 
 
    </div> 
 
</div>

Answer 2

的换行和缩进导致的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> 

Answer 3

这是由于所引起的HTML代码的DIV之间的换行符的空白。

避免这种情况的一种方法是重新排列闭合和打开DIV标签，如下面的代码片段所示。这样，有关闭</div>与后续打开<div>之间没有空格：

body { 
 
    background-color: #174c6d; 
 
    font-family: verdana, sans-serif; 
 
    color: white; 
 
} 
 

 
h1 { 
 
    font-size: 50px; 
 
} 
 

 
h2 { 
 
    margin-bottom: 30px; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.row>div { 
 
    margin: 0px; 
 
    display: inline-block; 
 
    font-size: 40px; 
 
    width: 70px; 
 
    height: 70px; 
 
    text-align: center; 
 
    padding: 0px; 
 
    vertical-align: top; 
 
    line-height: 70px; 
 
} 
 

 
.right { 
 
    border-right: solid 5px white; 
 
} 
 

 
.bottom { 
 
    border-bottom: solid 5px white; 
 
} 
 

 
.resetGame { 
 
    font-size: 20px; 
 
    background-color: gray; 
 
} 
 

 
#message { 
 
    /* display: inline-block; */ 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <!-- header --> 
 
    <div class="header"> 
 
    <img src="http://pctechtips.org/pics/header-logo-tictactoe.png"> 
 
    </div> 
 
    <div class="ticTacToe"> 
 
    <!-- first row (3 square) --> 
 
    <div class="row"> 
 
     <div id="0" class="square right bottom"> 
 
     </div><div id="1" class="square right bottom"> 
 
     </div><div id="2" class="square bottom"></div> 
 
    </div> 
 

 
    <!-- second row (3 square) --> 
 
    <div class="row"> 
 
     <div id="3" class="square right bottom"> 
 
     </div><div id="4" class="square right bottom"> 
 
     </div><div id="5" class="square bottom"></div> 
 
    </div> 
 

 
    <!-- third row (3 square) --> 
 
    <div class="row"> 
 
     <div id="6" class="square right"> 
 
     </div><div id="7" class="square right"> 
 
     </div><div id="8" class="square"></div> 
 
    </div> 
 
    </div> 
 
    <div class="controls"> 
 
    <h2 id="message">Message:</h2> 
 
    <button type="button" class="resetGame">Reset Game</button> 
 
    </div> 
 
</div>

Answer 4

只需添加font-size:0到每一行：

body { 
 
    background-color: #174c6d; 
 
    font-family: verdana, sans-serif; 
 
    color: white; 
 
} 
 

 
h1 { 
 
    font-size: 50px; 
 
} 
 

 
h2 { 
 
    margin-bottom: 30px; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
/* ADDED */ 
 
.row { 
 
    font-size:0; 
 
} 
 
/* CSS */ 
 
.row>div { 
 
    margin: 0px; 
 
    display: inline-block; 
 
    font-size: 40px; 
 
    width: 70px; 
 
    height: 70px; 
 
    text-align: center; 
 
    padding: 0px; 
 
    vertical-align: top; 
 
    line-height: 70px; 
 
} 
 

 
.right { 
 
    border-right: solid 5px white; 
 
} 
 

 
.bottom { 
 
    border-bottom: solid 5px white; 
 
} 
 

 
.resetGame { 
 
    font-size: 20px; 
 
    background-color: gray; 
 
} 
 

 
#message { 
 
    /* display: inline-block; */ 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <!-- header --> 
 
    <div class="header"> 
 
    <img src="http://pctechtips.org/pics/header-logo-tictactoe.png"> 
 
    </div> 
 
    <div class="ticTacToe"> 
 
    <!-- first row (3 square) --> 
 
    <div class="row"> 
 
     <div id="0" class="square right bottom"></div> 
 
     <div id="1" class="square right bottom"></div> 
 
     <div id="2" class="square bottom"></div> 
 
    </div> 
 

 
    <!-- second row (3 square) --> 
 
    <div class="row"> 
 
     <div id="3" class="square right bottom"></div> 
 
     <div id="4" class="square right bottom"></div> 
 
     <div id="5" class="square bottom"></div> 
 
    </div> 
 

 
    <!-- third row (3 square) --> 
 
    <div class="row"> 
 
     <div id="6" class="square right"></div> 
 
     <div id="7" class="square right"></div> 
 
     <div id="8" class="square"></div> 
 
    </div> 
 
    </div> 
 
    <div class="controls"> 
 
    <h2 id="message">Message:</h2> 
 
    <button type="button" class="resetGame">Reset Game</button> 
 
    </div> 
 
</div>