div之间不需要的水平边距

时间：2017-08-14 19:24:09

标签： javascript html css

我正在进行tic tac toe游戏，由于某种原因，div似乎有左边缘或右边缘。无论如何，div之间有一个水平边距。我需要方块彼此靠近。我怎样才能做到这一点？

如果有人对看到它的外观感兴趣，请使用以下笔：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>

4 个答案:

答案 0 :(得分：3)

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

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

将此更改为以下内容：

DB.update("contacts", CV, "cname=" + V,null);

答案 1 :(得分：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>

答案 2 :(得分：1)

只需在每行添加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>

答案 3 :(得分：0)

这是由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>

相关问题
最新问题