如何解决Next.js井字棋棋盘每行下方的空白问题（CSS）

问题根源分析 #

1. <p>标签的默认边距：你在按钮内部用<p>标签包裹内容，虽然设置了margin-top:0，但浏览器默认给<p>标签添加了margin-bottom，这会在按钮底部产生额外空白，进而导致行与行之间出现间隙。
2. inline-block元素的垂直对齐：squareContainer设置为inline-block，这类元素默认的vertical-align是baseline，会和其他元素产生垂直方向的间隙。

具体修复方案 #

方案一：移除多余的<p>标签（推荐）

直接将方块组件里的<p>标签去掉，把内容直接放在按钮内，避免引入默认的段落边距：

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

方案二：清除<p>标签的底部边距

如果一定要保留<p>标签，在CSS里补充设置：

h1, h2, h3, h4, h5, h6, p {
    margin: 0; /* 替换原来的margin-top:0，同时清除上下边距 */
    padding: 0;
}

方案三：修正inline-block的垂直对齐

给squareContainer添加垂直对齐样式，消除间隙：

.squareContainer {
    display: inline-block;
    vertical-align: top; /* 添加这一行 */
}

额外优化建议 #

你现在用float来排列方块，其实可以用Flexbox更简洁地实现布局，比如给boardRow设置display: flex，去掉float和clearfix的代码，这样布局更稳定且易维护：

.boardRow {
    display: flex;
}
.square {
    /* 去掉float: left和margin-top/-right的负值调整 */
    height: 30vmin;
    width: 30vmin;
    font-size: 25vmin;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    padding: 0;
}

对应的JSX结构不需要改动，Flexbox会自动排列每行的三个方块。

内容的提问来源于stack exchange，提问作者logobot3000