How can I remove the space under each row on my Tic-Tac-Toe board in Next.js using CSS?

Question

Why is there a space under every row? (css)

I'm trying to make a Next.js tic-tac-toe application to test my skills. However, I am running into an issue with the css. There seems to be a padding issue maybe under every board row- just a small space underneath every row. An image is attached.

I've tried setting padding and margin to 0 in almost all places. Here's my css.

body {
    background-color: black;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding: 0;
}

.square {
    height: 30vmin;
    width: 30vmin;
    font-size: 25vmin;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    float: left;
    margin-top: -1px;
    margin-right: -1px;
    line-height: 30vmin;
    padding: 0;
}

.squareContainer {
    display: inline-block;
}

.boardContainer {
    border: 2px solid white;
    display: inline-block;
    margin: 0;
}

.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boardRow:after {
    clear: both;
    content: '';
    display: table;
    padding: 0;
  }

Here's the JSX for the board:

<div className={styles.boardContainer}>
            <div className={styles.boardRow}>
                <Square value={squares[0]} onSquareClick={() => handleClick(0)}/>
                <Square value={squares[1]} onSquareClick={() => handleClick(1)}/>
                <Square value={squares[2]} onSquareClick={() => handleClick(2)}/>
            </div>
            <div className={styles.boardRow}>
                <Square value={squares[3]} onSquareClick={() => handleClick(3)}/>
                <Square value={squares[4]} onSquareClick={() => handleClick(4)}/>
                <Square value={squares[5]} onSquareClick={() => handleClick(5)}/>
            </div>
            <div className={styles.boardRow}>
                <Square value={squares[6]} onSquareClick={() => handleClick(6)}/>
                <Square value={squares[7]} onSquareClick={() => handleClick(7)}/>
                <Square value={squares[8]} onSquareClick={() => handleClick(8)}/>
            </div>
        </div>

and for the squares:

<div className={styles.squareContainer}>
            <button className={styles.square} onClick={onSquareClick}>
                <p>
                    { value }
                </p>
            </button>
        </div>

I don't know the problem, please help.

Where's the HTML? Provide a [mre]. – Unmitigated Jun 03 '23 at 17:31 — Unmitigated, Jun 03 '23 at 17:31
Added the JSX @Unmitigated – logobot3000 Jun 03 '23 at 17:39 — logobot3000, Jun 03 '23 at 17:39

score 2 · Accepted Answer · answered Jun 03 '23 at 17:45

Had to guess the HTML. Hope it matches with yours. Commenting out the display: inline-block; rule for .squareContainer solves the problem. Still, this css/html is overkill for this purpose. You can greatly simplify.

body {
    background-color: black;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding: 0;
}

.square {
    height: 30vmin;
    width: 30vmin;
    font-size: 25vmin;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    float: left;
    margin-top: -1px;
    margin-right: -1px;
    line-height: 30vmin;
    padding: 0;
}

.squareContainer {
    /* display: inline-block;  */
}

.boardContainer {
    border: 2px solid white;
    display: inline-block;
    margin: 0;
}

.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boardRow:after {
    clear: both;
    content: '';
    display: table;
    
    padding: 0;
  }

<body>
  <div class="container">
    <div class="boardContainer">
      <div class="boardRow">
        <div class="squareContainer">
          <div class="square"></div>
          <div class="square"></div>
          <div class="square"></div>        
        </div>
      </div>
      <div class="boardRow">
        <div class="squareContainer">
          <div class="square"></div>
          <div class="square"></div>
          <div class="square"></div>        
        </div>
      </div>
      <div class="boardRow">
        <div class="squareContainer">
          <div class="square"></div>
          <div class="square"></div>
          <div class="square"></div>        
        </div>
      </div>
    </div>
  </div>
</body>

This makes all of the squares align in a row, and not in a 3x3 grid. I added the JSX. Thank you anyways. — logobot3000, Jun 03 '23 at 17:50
I was using the squareContainer on each square individually, this works. Sorry! Thank you. — logobot3000, Jun 03 '23 at 17:53
Glad to hear that! :) Btw, it would be easier to implement this layout with flex or grid. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/ — burkay, Jun 03 '23 at 18:28

How can I remove the space under each row on my Tic-Tac-Toe board in Next.js using CSS?

1 Answers1