Heim  >  Fragen und Antworten  >  Hauptteil

Wie entferne ich mithilfe von CSS den Leerraum unter jeder Zeile auf dem Tic-Tac-Toe-Board in Next.js?

Warum steht unter jeder Zeile ein Leerzeichen? (CSS)

Ich versuche, eine Next.js-Tic-Tac-Toe-App zu erstellen, um meine Fähigkeiten zu testen. Allerdings habe ich Probleme mit CSS. Es scheint ein Problem mit der Polsterung unter jeder Brettreihe zu geben – unter jeder Reihe ist ein kleiner Raum. Im Anhang ist ein Bild.

Ich habe fast überall versucht, den Abstand und die Ränder auf 0 zu setzen. Das ist mein 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;
  }

Dies ist JSX für das Motherboard:

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

Für Quadrate:

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

Ich weiß nicht, was das Problem ist, bitte helfen Sie.

P粉004287665P粉004287665221 Tage vor1522

Antworte allen(1)Ich werde antworten

  • P粉828463673

    P粉8284636732024-04-06 10:55:58

    必须猜测 HTML。希望它与你的相匹配。注释掉 .squareContainerdisplay: inline-block; 规则可以解决该问题。尽管如此,这个 css/html 对于这个目的来说还是太过分了。您可以大大简化。

    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>

    Antwort
    0
  • StornierenAntwort