Remove Vertical margins between Flex Children-CodePudding

I'm trying to create a simple grid-based ASCII graphics system in HTML.
The system interprets an array of single-character strings as a grid, with regular partitions representing rows.
These rows are then appended to some parent via a DIV or P container.

Aside from negative margins, how can I stylize this so that the distance between rows and columns are the same?

Here's what I've tried so far:

.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 >
    <div>XXXX</div>
    <div>XXXX</div>
    <div>XXXX</div>
    <div>XXXX</div>
  </div>
</body>

</html>

To be clear, I need the characters to sit flush against each other.

CodePudding user response：

One way would be to set line-height to the width of the character (8px):

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

<div >
  <div>XXXX</div>
  <div>XXXX</div>
  <div>XXXX</div>
  <div>XXXX</div>
</div>

CodePudding user response：

You could use a grid display (instead of a flex one) and use the row-gap property aligned with letter-spacing:

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

CodePudding user response：

You can do the following:

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

}

It will achieve the desired output using css flex.

CodePudding user response：

You can get the desired affect with line-height, instead of using a flex. On some browsers, it may have weird line height issues, but that can be fixed by setting line heights in the divs themselves.

.grid {
  line-height: 0.69;
}

<div >
  <div>XXXX</div>
  <div>XXXX</div>
  <div>XXXX</div>
  <div>XXXX</div>
</div>

The code below fixes line-height issues by only changing the line-height on the child divs.

.griddiv {
  line-height: 0.65;
}

<div >
  <div >XXXX</div>
  <div >XXXX</div>
  <div >XXXX</div>
  <div >XXXX</div>
</div>