Как сдвинуть элемент на 100px вправо?

Сдвиг элемента вправо с помощью CSS

Для смещения элемента на 100px вправо чаще всего применяют свойство transform с функцией translateX(). Этот метод не изменяет положение элемента в потоке документа, что предотвращает смещение соседних элементов. Например, если у вас есть кнопка, которую нужно подвинуть, вы можете написать:

.element {
  transform: translateX(100px);
}

Другой способ — использовать position: relative и left: 100px. Однако при этом элемент смещается относительно своего нормального положения, и его исходное место остаётся занятым, что может вызвать неожиданные перекрытия. Пример:

.element {
  position: relative;
  left: 100px;
}

Также можно применить margin-left: 100px, но это увеличит внешний отступ и повлияет на соседние элементы, сдвигая их. Этот вариант подходит, если нужно изменить расстояние между элементами, а не просто сдвинуть один элемент.

Где применяется

• Анимации и переходы — transform лучше для производительности, так как использует GPU.
• Создание выпадающих меню или всплывающих подсказок.
• Корректировка положения элементов без изменения разметки.

Вывод: для простого сдвига на фиксированное расстояние без влияния на поток документа используйте transform: translateX(). Если нужно изменить расположение в контексте документа, подойдёт position: relative.