移除 Flex 子项之间的垂直边距

Question

我正在尝试在 HTML 中创建一个简单的基于网格的 ASCII 图形系统。
系统将单字符字符串数组解释为网格，其中规则分区代表行。
这些行然后通过 DIV 或 P 容器附加到某个父级。

除了负边距，我怎样才能将其样式化以使行和列之间的距离相同？

这是我目前尝试过的方法：

.grid {
  display: flex;
  flex-direction: column;
  row-gap: 0px;
  font-family: monospace;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="grid">
    <div>XXXX</div>
    <div>XXXX</div>
    <div>XXXX</div>
    <div>XXXX</div>
  </div>
</body>

</html>

为了清楚起见，我需要角色坐齐平相对。

Answer 1

您可以使用网格显示（而不是柔性显示）并使用 row-gap 属性与 letter-spacing:

对齐

.grid {
  display: grid;
  row-gap: 20px;
  letter-spacing: 20px;
}

Answer 2

一种方法是将 line-height 设置为字符的宽度 (8px):

.grid {
  display: flex;
  flex-direction: column;
  font-family: monospace;
  line-height: 8px;
}

<div class="grid">
  <div>XXXX</div>
  <div>XXXX</div>
  <div>XXXX</div>
  <div>XXXX</div>
</div>

Answer 3

您可以执行以下操作：

.grid {
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 row-gap: 10px;
 letter-spacing: 20px;

}

它将使用 css flex 实现所需的输出。

Answer 4

您可以使用 line-height 获得所需的效果，而不是使用 flex。在某些浏览器上，它可能有奇怪的行高问题，但这可以通过在 div 本身中设置行高来解决。

.grid {
  line-height: 0.69;
}

<div class="grid">
  <div>XXXX</div>
  <div>XXXX</div>
  <div>XXXX</div>
  <div>XXXX</div>
</div>

下面的代码通过仅更改子 div 上的 line-height 修复了 line-height 问题。

.griddiv {
  line-height: 0.65;
}

<div class="grid">
  <div class="griddiv">XXXX</div>
  <div class="griddiv">XXXX</div>
  <div class="griddiv">XXXX</div>
  <div class="griddiv">XXXX</div>
</div>

移除 Flex 子项之间的垂直边距

Remove Vertical margins between Flex Children

html

css

margin