CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか?

Question

各行の下にスペースがあるのはなぜですか? (CSS)

自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボードの各行の下にパディングの問題があるようです。各行の下に小さなスペースがあります。写真を添付し​​ます。

パディングとマージンをほぼすべての場所で 0 に設定してみました。これが私のCSSです。

リーリー

これはマザーボードの JSX です:

リーリー

正方形の場合:

リーリー

何が問題なのかわかりません。助けてください。

Answer 1

HTML を推測する必要があります。それがあなたのものと一致することを願っています。 .squareContainer の display: inline-block; ルールをコメントアウトすると、この問題を解決できます。それでも、この css/html はこの目的には過剰です。大幅に簡素化できます。

リーリー リーリー