当我尝试在按钮中放置一个“X”字母时，它会稍微下降，CSS 和 React

Question

所以，我基本上是在尝试在 React 上做一个 TicTacToe 游戏，我已经设法创建了正方形，但是当我单击其中一个时，正方形会向下一点，为什么？.square {  height: 70px;  width: 70px;  background-color: #fff;  border: 1px solid #000;  outline: none;  margin: 2px;}.board {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  width: 400px;  height: 400px;}还有一件事，在我的 VsCode 中，React 组件不会自动关闭，它保持不变，但我希望它在我保存时保持不变。

Answer 1

您需要添加vertical-align: top;到您的.square.

的是默认的display，而设置为。buttoninline-blockvertical-alignbaseline

当有空的和有内容的时，内容（即字符x）将自动对齐到其余部分的基线 - 由于其他内容是空的，它会对齐到其框的底部。

vertical-align: top您可以通过添加到按钮来解决此问题：

.square {

  height: 70px;

  width: 70px;

  background-color: #fff;

  border: 1px solid #000;

  outline: none;

  margin: 2px;

}

.row-2 .square {

  vertical-align: top;

}

<h2>Before</h2>

<div class="row">

  <button class="square"></button>

  <button class="square">x</button>

  <button class="square"></button>

</div>

<h2>After</h2>

<div class="row-2">

  <button class="square"></button>

  <button class="square">x</button>

  <button class="square"></button>

</div>