Question

我正在制作HTML棋盘。问题是每行之间有多余的空间

我正在尝试使用margin-top: 0px删除div元素之间的垂直空间。但这行不通吗？我的浏览器是Firefox

这是我用来生成国际象棋棋盘的javascript

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>

Answer 1

将display: flex添加到.row。

编辑：在Firefox，Chrome和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>

Answer 2

将line-height的{{1}}属性设置为row将解决此问题。这将占用其中元素的高度，即0

Answer 3

我找到了一种解决方案：将margin-top设置为负值，在我的情况下为-4px

margin-top：0px不会删除垂直空白吗？

3 个答案: