此问题已在此处有答案:
How to remove the space between inline/inline-block elements?(41答案)
昨天关门了。
为什么每一行下面都有一个空格?(css)
我正在尝试制作一个Next.js井字游戏应用程序来测试我的技能。但是,我遇到了一个关于CSS的问题。似乎有一个填充的问题,也许在每一排板下-只是每一排下面的一个小空间。已附加图像。
我已经尝试在几乎所有的地方将padding和margin设置为0。这是我的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;
}
下面是针对董事会的JSX:
<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>
对于正方形:
<div className={styles.squareContainer}>
<button className={styles.square} onClick={onSquareClick}>
<p>
{ value }
</p>
</button>
</div>
我不知道这个问题,请帮助。
1条答案
按热度按时间bvjveswy1#
我猜是HTML。希望能和你的相配。注解掉
.squareContainer
的display: inline-block;
规则可以解决这个问题。尽管如此,这个css/html对于这个目的来说还是有点过头了。你可以大大简化。