简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何使用 CSS 删除 Next.js 中井字游戏板上每行下方的空格？
P粉004287665
P粉004287665 2024-04-05 11:39:02
0
1
1426

为什么每一行下面都有一个空格？ （CSS）

我正在尝试制作一个 Next.js 井字游戏应用程序来测试我的技能。但是，我遇到了 css 问题。似乎每行板下方都存在填充问题 - 每行下方都有一个小空间。附上一张图片。

我尝试在几乎所有地方将填充和边距设置为 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>

不知道问题所在，请帮忙。

P粉004287665
P粉004287665

全部回复(1)
P粉828463673
P粉8284636732024-04-06 10:55:58 1 楼

必须猜测 HTML。希望它与你的相匹配。注释掉 .squareContainer 的 display: inline-block; 规则可以解决该问题。尽管如此，这个 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>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！