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

Question

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;
}

add `font-size:0` to `#gameField` which will remove `whitespace` between `inline-block` elements and add `font-size` to `.title` if you need — Vitorino fernandes, Jul 26 '15 at 08:43
and use `box-sizing:border-box` which takes `border`, `padding` from inside — Vitorino fernandes, Jul 26 '15 at 08:48
`box-sizing: border-box` for `#gamefield .title` aligned them in a 3x3 order, but I needed `font-size: 0` also to perfectly fit into the `#gameField` div. Thanks [Vitorino fernandes](http://stackoverflow.com/users/4025556/vitorino-fernandes) — B4RN154N, Jul 26 '15 at 12:05

score 0 · Answer 1 · answered Jul 26 '15 at 08:46

0

I think you need to increase 300px width from 302px because border takes space. Now your border is 1px therefore it take space inside. Hope it will fix your problem.

answered Jul 26 '15 at 08:46

Kashif Ahmed

39
8

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

1 Answers1