Need help for a 3×3 tic-tac-toe game’s design. I can’t get rid of some space in CSS

The design goal would be just to perfectly fit all div.tile into the div#gameField. My jQuery works fine, but than I got this CSS mess. Please tell me where the unwanted space, margin or padding comes from, because I have no more idea. I don’t think it’s the cause, but I use this one normalize.css too.

HTML5:

<!DOCTYPE html>
<html>
    <head>
        <title>Tic Tac Toe</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <h1>Tic Tac Toe</h1>
        <div id="gameField">
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
        </div>

        <!--jQuery-->
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

CSS3:

body {
    background-color: black;
    color: lightgrey;
    text-align: center;
}

#gameField {
    margin: 10px auto 10px auto;
    width: 300px;
    height: 300px;
    background-color: white;
    border: 5px solid darkgrey;
    border-radius: 10px;
    padding: 0 0 0 0;
}

#gameField .tile {
    width: 100px;
    height: 100px;
    border: 1px solid lightgrey;
    background-color: white;
    display: inline-block;
    border-radius: 10px;
}


Source: html

Leave a Reply