网格中行之间的空间[重复]答案

【问题标题】：Space between rows in a grid [duplicate]网格中行之间的空间[重复]
【发布时间】：2021-07-09 16:09:40
【问题描述】：

我正在尝试创建一个 16x16 的网格。一切都很完美，除了我的行之间有一些空间，我不知道为什么。列之间的间距是完美的，但行之间有一些差距。

这是我的代码：

const container = document.getElementById("drawingGrid");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");

function createGrid() {
  makeRows(16);
  makeColumns(16);
}

// create rows
function makeRows(rowNum) {
  for (r = 0; r < rowNum; r++) {
    let row = document.createElement("div");
    container.appendChild(row).className = "gridRow";
  }
}
// create columns
function makeColumns(cellNum) {
  for (i = 0; i < rows.length; i++) {
    for (j = 0; j < cellNum; j++) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    }
  }
}

createGrid();

.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 10px;
  display: inline-block;
  margin: 0;
  padding: 0;
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>EtchASketch</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div id="drawingGrid">
  </div>

  <script src="app.js"></script>
</body>

</html>

这是它在 chrome 上的样子：

【问题讨论】：

使用.gridRow { display: flex; }修复它。
@m4n0 的回答比我看到的任何东西都要好——至于 为什么 存在差距，这有点神秘。
因为你的行中有一个默认的行高
@AlexanderNied 我怀疑计算出的font-size: 16px。
差距就是所谓的：inline decender space。 y、j、g、p 等字母的空间，需要低于正常基线的空间。

标签： javascript html css

【解决方案1】：

你可以把gridRow 变成一个弹性盒子容器。您可以在此处阅读空格背后的原因：Why does my image have space underneath?。

const container = document.getElementById("drawingGrid");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");

function createGrid() {
  makeRows(16);
  makeColumns(16);
}

// create rows
function makeRows(rowNum) {
  for (r = 0; r < rowNum; r++) {
    let row = document.createElement("div");
    container.appendChild(row).className = "gridRow";
  }
}
// create columns
function makeColumns(cellNum) {
  for (i = 0; i < rows.length; i++) {
    for (j = 0; j < cellNum; j++) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    }
  }
}

createGrid();

.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 10px;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.gridRow {
  display: flex;
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>EtchASketch</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div id="drawingGrid">
  </div>

  <script src="app.js"></script>
</body>

</html>

【讨论】：

【解决方案2】：

您应该定义行的高度：

.gridRow{
  max-height:10px;
}

或设置行的行高：

.gridRow{
  line-height:10px;
}

或使用由 m4n0 定义的 flexbox。

【讨论】：

谢谢，效果很好！