1

I working on tic tac toe game and for some reason the divs seem to have margin left or right. anyway there's a horizontal margin between the divs. I need the squares to be close to each other. How can I achieve that?

Here's the pen if someone is interested in seen how it looks: 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>
showdev
  • 28,454
  • 37
  • 55
  • 73
miatech
  • 2,150
  • 8
  • 41
  • 78
  • Just as a secondary type of answer opposite of the font-size answer people are providing, you can also add `margin-left: -6px;` to your `.row > div` to remedy the space as well. Just throwing this out there as another option. Your codepen edited with this: https://codepen.io/anon/pen/OjxEej – dbrree Aug 14 '17 at 19:34

4 Answers4

3

The line breaks and indentation is causing the divs to have whitespace between.

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

Change this to something like this:

    <div id="0" class="square right bottom"></div><!--
 --><div id="1" class="square right bottom"></div><!--
 --><div id="2" class="square bottom"></div>
Oliver Ni
  • 2,606
  • 7
  • 29
  • 44
1

You need to use font-size: 0; on element, that contains your inline elements.

More precise answer is 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>
Animus
  • 665
  • 12
  • 24
1

Just add font-size:0 to each row :

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>
DjaouadNM
  • 22,013
  • 4
  • 33
  • 55
0

That's due to the whitespace caused by the linebreaks between the DIVs in the HTML code.

One way to avoid that is to rearrange the closing and opening DIV tags as shown in my snippet below. That way there is no space between a closing </div> and the subsequent opening <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>
Johannes
  • 64,305
  • 18
  • 73
  • 130