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
Post a Comment