tic tac toeインターフェイスに関する問題

Question

私は学校のプロフェッショナルのためにチックタックのつま先ゲームを作っています。私はすでにインターフェイスを持っていますが、テキストを挿入するとすべての行が下に移動します。

Interface picture...

Text inserted...

これは私がdiv要素を使用しました...これは私のCSSコードです...

#game-space{ 

    margin: 0 auto; 
    width: 310px; 
    height: 310px; 
    background-color: rgba(0, 0, 0, 0.8); 
    border-radius: 15px; 
} 
.casilla{ 
    width: 100px; 
    height: 100px; 
    border: solid 10px rgba(0, 0, 0, 0.8); 
    border-radius: 15px; 
    background-color: white; 
    cursor: pointer; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

<div id="game-space"> 
    <label class="casilla"></label> 
    <label class="casilla">X</label> 
    <label class="casilla"></label> 
    <br> 
    <label class="casilla"></label> 
    <label class="casilla"></label> 
    <label class="casilla"></label> 
    <br> 
    <label class="casilla"></label> 
    <label class="casilla"></label> 
    <label class="casilla">O</label> 
</div> 
    <br> 
    <button id="new-game">Juego Nuevo</button> 

私のhtmlコードです、 p、およびボタンタグも表示されます。

Answer 1

、期待される結果を達成するため、HTMLで
1.Removed BRタグ
2.Increased幅とゲーム空間のdivの高さをBRタグをCSSの下に使用して削除してくださいするには
3.Usedオーバーフロー：casillaのために隠されました（値が唯一のXOあるとして）のdiv、divのコンテンツとして間違ったURLを入れていました

#game-space{ 
    margin: 0 auto; 
    width: 370px; 
    height: 370px; 
    background-color: rgba(0, 0, 0, 0.8); 
    border-radius: 15px; 
} 
.casilla{ 
    width: 100px; 
    height: 100px; 
    border: solid 10px rgba(0, 0, 0, 0.8); 
    border-radius: 15px; 
    background-color: white; 
    cursor: pointer; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    overflow:hidden; 
} 

http://codepen.io/nagasai/pen/OXxVvA