How to eliminate some extra pixels in between buttons and their parent in HTML?

Question

I am try to make Tic Tac Toe grids in HTML playing with react.js.

I created three rows, each with three buttons with the code below:

<div class='row'>
    <button class='square' name='sq1' onClick={this.onBoard}>{this.state.sq1}</button>
    <button class='square' name='sq2' onClick={this.onBoard}>{this.state.sq2}</button>
    <button class='square' name='sq3' onClick={this.onBoard}>{this.state.sq3}</button>
</div>

There are two problems I can't solved and don't know why:

There is a 3 pixels gap under the buttons inside the row. I set the .square height to 100 px; no padding or margin, and I check the row setting, no padding or margin too. The height of buttons are 100px, while height of row is 103px. Really don't know where these 3px gaps come from.

style:

.square {
  height: 100px;
  width: 100px;
  padding: 0;
  margin: 0px;
  font-size: 15px;
}

when I use onClick={this.onBoard} to set the this.state.sq1, suddenly the button is shifted down like 40px, and when all three button in the the row are all set with values, then those three buttons are aligned again. That may have something to do with the text, I guess, but I just locate where the problem is.

Thanks heaps in advance.

Are you using Bootstrap? – Anurag Srivastava Dec 21 '19 at 09:58 — Anurag Srivastava, Dec 21 '19 at 09:58
vertical-align:top to your buttons – Temani Afif Dec 21 '19 at 10:18 — Temani Afif, Dec 21 '19 at 10:18
@Anurag Srivastava, no, not Bootstrap – Sheng Zhuang Dec 21 '19 at 10:30 — Sheng Zhuang, Dec 21 '19 at 10:30
@Temani Afif, thanks it solved both of my problems. – Sheng Zhuang Dec 21 '19 at 10:32 — Sheng Zhuang, Dec 21 '19 at 10:32

How to eliminate some extra pixels in between buttons and their parent in HTML?

0 Answers0