'Why is there space between the parallelogram-divs?

I've made a few parallelograms in a row like that, but there is some space between them. I want to remove that space. margin-left: -1px; works, but I'm afraid that it's a bad solution to this problem.

enter image description here

Here is a fiddle: https://jsfiddle.net/rw40ugq1/

Here is the code:

body {
    font-size: 0;
    margin: 0;
}

.parallelogram {
    background-color: red;
    display: inline-block;
    height: 100px;
    width: 85px;
    transform: skew(20deg);
    position: relative;
}
<body>
    <div class="parallelogram"></div>
    <div class="parallelogram"></div>
    <div class="parallelogram"></div>
    <div class="parallelogram"></div>
    <div class="parallelogram"></div>
    <div class="parallelogram"></div>
</body>
htmlcssmargin


Solution 1:[1]

You can add a small outline:

.container {
  font-size: 0;
  margin: 0;
}

.button {
  height: 100px;
  background-color: red;
  width: 85px;
  display: inline-block;
  position: relative;
  transform: skew(20deg);
  outline:0.1px solid red;
}
<div class="container">
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>

Solution 2:[2]

The problem here seems to be the width of the parallelogram sometimes a certain width can show a space between the divs.

Try to change:

width: 85px;

To

width: 86px;

Usually the odd numbers will show a space between the divs try to always use an even number while choosing the width of an element.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 alex

Related Questions