Почему в каждом втором параллелограмме есть место? - PullRequest
Новая
       29

Почему в каждом втором параллелограмме есть место?

0 голосов
/ 01 июня 2019

Вопрос в названии.

Вот скрипка: https://jsfiddle.net/ms89adx4/1/

Вот код: 

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

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

Я хочу, чтобы не было пробела каждую секунду div.Я мог бы просто сделать margin-left: -0.5px;, но я думаю, что это плохое решение этой проблемы.

enter image description here

Ответы [ 2 ]

1 голос
/ 01 июня 2019

Вы можете добавить небольшой контур: 

.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>
0 голосов
/ 01 июня 2019

Проблема здесь заключается в ширине параллелограмма, иногда определенная ширина может показывать пробел между элементами div.

Попробуйте изменить: 

width: 85px;

На 

width: 86px;

Обычно нечетные числа будут отображать пробел между элементами, пытаясь всегда использовать четное число при выбореширина элемента.

...