Heim > Fragen und Antworten > Hauptteil
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粉8284636732024-04-06 10:55:58
必须猜测 HTML。希望它与你的相匹配。注释掉 .squareContainer
的 display: 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>