为什么平行四边形-div之间有space？

Question

我已经连续做了几个平行四边形，但是它们之间有一些 space。我想删除那个 space。 margin-left: -1px; 有效，但我担心这不是解决此问题的好方法。

这是一个fiddle：https://jsfiddle.net/rw40ugq1/

代码如下：

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>

Answer 1

这里的问题好像是平行四边形的宽度有时某个宽度可以在div之间显示一个space。

尝试改变：

width: 85px;

到

width: 86px;

通常奇数会在 div 之间显示 space 在选择元素的宽度时尝试始终使用偶数。

Answer 2

您可以添加一个小轮廓：

.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>

为什么平行四边形-div之间有space？

Why is there space between the parallelogram-divs?

html

css

margin