当我尝试在按钮中放置一个“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 {&nbsp; height: 70px;&nbsp; width: 70px;&nbsp; background-color: #fff;&nbsp; border: 1px solid #000;&nbsp; outline: none;&nbsp; margin: 2px;}.row-2 .square {&nbsp; vertical-align: top;}<h2>Before</h2><div class="row">&nbsp; <button class="square"></button>&nbsp; <button class="square">x</button>&nbsp; <button class="square"></button></div><h2>After</h2><div class="row-2">&nbsp; <button class="square"></button>&nbsp; <button class="square">x</button>&nbsp; <button class="square"></button></div>