div間の不要な水平マージン

Question

私はチックタックのつま先のゲームに取り組んでいます。何らかの理由で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>

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> 

このようなものに変更し、これを：HTMLコード内の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

。

これを回避する1つの方法は、下のスニペットに示すように、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を追加：閉鎖</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; 
 
} 
 
/* 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>