Блог

Итак, я в основном пытаюсь сыграть в крестики-нолики на React, и мне удалось создать квадраты, но когда я нажимаю на один из них, квадрат немного опускается, почему?

 .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 не закрываются автоматически, они остаются такими, но я хочу, чтобы это было при сохранении.

Вам нужно добавить vertical-align: top; в свой .square .

display Из button s по умолчанию inline-block , а vertical-align установлено значение baseline .

Когда есть пустые и один с содержимым, содержимое (которое является символом 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>