javascript - unwanted horizontal margin between divs -


this question has answer here:

i working on tic tac toe game , reason divs seem have margin left or right. anyway there's horizontal margin between divs. need squares close each other. how can achieve that?

here's pen if interested in seen how 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>

the line breaks , indentation causing divs 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:

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

Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -