欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何使用CSS刪除Next.js中我的井字游戲棋盤上每一行下面的空格？[重復(fù)]

CSS
李中冰2年前8瀏覽0評論

為什么每行下面都有一個空格？(css)

我在嘗試做一個Next.js井字游戲應(yīng)用來測試我的技能。但是，我遇到了css的問題。似乎在每一行棋盤下都有一個填充問題——每行棋盤下只有一個小空間。附上一張圖片。

The problem with my tic-tac-toe board.

我?guī)缀踉谒械胤蕉紘L試過將填充和邊距設(shè)置為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>

不知道問題，請幫忙。

不得不猜測HTML。希望和你的相配。注釋掉顯示:inline-block；統(tǒng)治。squareContainer解決了這個問題。盡管如此，這個css/html對于這個目的來說是多余的。你可以大大簡化。

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>