margin-top: 0px doesn't remove vertical white space?

Question

I'm making a html chess board. The problem is between each row there are unwanted space

I'm trying to remove vertical space between the div elements with margin-top: 0px. But it doesn't work? My browser is Firefox

Here is the javascript i use to generate the chess board

for (var i = 0; i < 8; i++) {
  let row = document.createElement("div");
  row.className = "row";
  for (var j = 0; j < 8; j++) {
    let tile = document.createElement("div");
    tile.className = "tile";
    tile.id = `${i}_${j}`
    if (i % 2 == j % 2) {
      tile.style.background = "white"
    } else {
      tile.style.background = "gray"
    }
    row.appendChild(tile);
  }
  document.getElementById("game").appendChild(row);
}

body {
  background-color: black;
}

.tile {
  height: 60px;
  width: 60px;
  display: inline-block;
}
.row {
  margin-top: 0px;
}

  <body>
    <div id="menu"></div>
    <div id="game"></div>
    <script src="client.js"></script>
  </body>

have you tried margin:0; and padding:0; ? even if so, do that again with !important to see if it works — Amin Setayeshfar, Dec 08 '19 at 10:02
and its best to check your rows in browser inspector to see if for any reason they have any margin or padding — Amin Setayeshfar, Dec 08 '19 at 10:03
thanks for your reply. but i just found a working solution: setting margin-top to a negative value, in my case -4px — Green Ball, Dec 08 '19 at 10:03
don't use font-size:0 or line-height:0 or negative margin .. it's a vertical align issue. Use `vertical-align:top` — Temani Afif, Dec 08 '19 at 11:06

score 2 · Accepted Answer · answered Dec 08 '19 at 10:43

Add display: flex to .row.

EDIT: tried it in Firefox, Chrome and Safari.

for (var i = 0; i < 8; i++) {
  let row = document.createElement("div");
  row.className = "row";
  for (var j = 0; j < 8; j++) {
    let tile = document.createElement("div");
    tile.className = "tile";
    tile.id = `${i}_${j}`
    if (i % 2 == j % 2) {
      tile.style.background = "white"
    } else {
      tile.style.background = "gray"
    }
    row.appendChild(tile);
  }
  document.getElementById("game").appendChild(row);
}

body {
  background-color: black;
}

.row {
  display: flex;
}

.tile {
  height: 60px;
  width: 60px;
}

  <body>
    <div id="menu"></div>
    <div id="game"></div>
    <script src="client.js"></script>
  </body>

score 0 · Answer 2 · answered Dec 08 '19 at 10:17

0

Setting the line-height property of row to 0 will solve the issue. This will it will take the height of the elements inside it i.e. tile

answered Dec 08 '19 at 10:17

Rishabh Kalakoti

84
6

yep, that's probaly a much better solution than mine – Green Ball Dec 08 '19 at 10:34

score -2 · Answer 3 · answered Dec 08 '19 at 10:04

-2

I found a solution: setting margin-top to a negative value, in my case -4px

answered Dec 08 '19 at 10:04

Green Ball

64
9

margin-top: 0px doesn't remove vertical white space?

3 Answers3