Почему блоки съезжают при масштабировании?

Question

[littleguga]

Вот демка, почему при изменении масштаба квадраты съезжаются и разъезжаются?
Высота их задана в vh.
Вот исходник.

Заранее благодарен за ответ!

Answer 1

[kn1ght_t]

* {
  box-sizing: border-box;
}

Comments

[littleguga]

Не помогло :(

[kn1ght_t]

littleguga: что именно у вас не получается? можете поподробнее объяснить, вы хотите, чтобы 4 квадрата по горизонтали влезали? у вас ширина контейнера 70vh - 2*2vh на паддинги, ширина квадрата 15vh+ 2vh на маргины
итого: 70-4-17*4=-2vh
выходит, что 2vh не хватает для квадратов
или я что-то не так понял?

[littleguga]

kn1ght_t: ширину пересчитал правильно и inline-block заменил на float: left.

Answer 2

[littleguga]

.palette-form-block{
	width: 15vh;
	height: 15vh;
	margin: 1vh;
	cursor: pointer;
	float: left;
	position: relative;
	z-index: 8;
}

Заменил inline-block на float: left; и пересчитал ширину родительской формы. Всё стало ок!