Как убрать отступ между блоком и кнопкой при любой ширине сайта

При разработке адаптивного интерфейса часто возникает ситуация, когда расстояние между фиксированным блоком (.shapka) и кнопкой (#open) меняется при изменении ширины окна браузера. Это происходит из-за использования абсолютных единиц (px, vw) и неправильного позиционирования. В этой статье мы объясним, как сделать отступ равным нулю при любом разрешении экрана, используя правильные CSS-свойства.

Почему меняется расстояние между блоком и кнопкой

В исходном коде кнопка #open имеет значение left: -100px, что задаёт фиксированное смещение в пикселях. Когда ширина окна уменьшается, блок .shapka сжимается пропорционально (ширина в vw), а кнопка остаётся на том же расстоянии от левого края. В результате видимый отступ между правым краем блока и кнопкой изменяется. Аналогичная проблема возникает с кнопкой #close из-за жёстко заданного left: 450px.

Как исправить: используйте относительные единицы и calc()

Чтобы расстояние между блоком и кнопкой было нулевым при любой ширине, нужно привязать положение кнопки к правому краю блока. Для этого используйте комбинацию свойств left с функцией calc() или задайте кнопке позиционирование относительно родительского контейнера.

Вариант 1: calc() для точного прилегания

Рассчитайте left кнопки как сумму ширины блока и его отступов. В вашем случае блок .shapka имеет width: 13vw и padding: 3vb. Чтобы кнопка находилась сразу после блока, задайте:

#open {
  position: fixed;
  left: calc(13vw + 6vb + 4px); /* 6vb - padding слева и справа, 4px - ширина границ */
  top: 15vh;
  width: 8vw;
}

Теперь при изменении ширины окна значение calc() будет пересчитываться автоматически, и расстояние останется нулевым.

Вариант 2: обёртка и flexbox

Если вы хотите полностью исключить расчёты, поместите и блок, и кнопку в общий контейнер с display: flex. Например:

<div style="display: flex; position: fixed; left: 0; top: 0;">
  <div class="shapka">...</div>
  <input type="image" id="open" src="/arrow.png"/>
</div>

Тогда кнопка будет автоматически примыкать к блоку без зазоров, а position: fixed можно задать контейнеру.

Проверка и дополнительные рекомендации

После внесения изменений протестируйте страницу в разных браузерах и на мобильных устройствах. Убедитесь, что кнопка не накладывается на блок и не выходит за границы экрана. Для кнопки #close также примените аналогичный подход - привяжите её к правому краю блока или используйте right вместо left.

Не забывайте, что position: fixed вырывает элемент из потока, поэтому все дочерние элементы нужно позиционировать относительно одного и того же контейнера. Используйте calc() или flexbox, чтобы избежать плавающих отступов.

Заключение

Чтобы расстояние между фиксированным блоком и кнопкой оставалось нулевым при любой ширине сайта, откажитесь от жёстких пиксельных значений в пользу относительных единиц и calc(), либо используйте контейнер с flexbox. Это обеспечит адаптивность и предсказуемое поведение интерфейса.