CSS를 사용하여 Next.js의 Tic-Tac-Toe 보드에서 각 줄 아래의 공간을 제거하는 방법은 무엇입니까?

Question

각 줄 아래에 공백이 있는 이유는 무엇인가요? (CSS)

제 실력을 테스트하기 위해 Next.js tic-tac-toe 앱을 만들려고 합니다. 그러나 CSS에 문제가 있습니다. 보드의 각 행 아래에 패딩 문제가 있는 것 같습니다. 각 행 아래에 작은 공간이 있습니다. 사진이 첨부되어 있습니다.

거의 모든 곳에서 패딩과 여백을 0으로 설정해 보았습니다. 이것이 내 CSS입니다.

으아악

메인보드용 JSX입니다:

으아악

사각형의 경우:

으아악

문제가 무엇인지 모르겠습니다. 도와주세요.

Answer 1

HTML을 추측해야 합니다. 그것이 당신과 일치하기를 바랍니다. .squareContainer 的 display: inline-block; 규칙을 주석 처리하면 문제가 해결됩니다. 그럼에도 불구하고 이 CSS/html은 이 목적에 있어서는 과잉입니다. 크게 단순화할 수 있습니다.

으아악 으아악