Mengapa terdapat ruang di bawah setiap baris? (CSS)
Saya cuba membuat apl tic-tac-toe Next.js untuk menguji kemahiran saya. Walau bagaimanapun, saya menghadapi masalah dengan css. Nampaknya terdapat masalah pelapik di bawah setiap baris papan - terdapat ruang kecil di bawah setiap baris. Dilampirkan adalah gambar.
Saya cuba menetapkan padding dan margin kepada 0 hampir di semua tempat. Ini CSS saya.
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;
}
Ini adalah JSX untuk papan induk:
<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>
Untuk segi empat sama:
<div className={styles.squareContainer}>
<button className={styles.square} onClick={onSquareClick}>
<p>
{ value }
</p>
</button>
</div>
Saya tidak tahu apa masalahnya, tolong bantu.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Kena teka HTML. Harap ia sepadan dengan anda. Mengulas peraturan
.squareContainer的display: inline-block;menyelesaikan masalah. Namun, css/html ini terlalu berlebihan untuk tujuan ini. Anda boleh memudahkannya dengan ketara.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>