Коротко: сдвинуть текст в CSS можно четырьмя способами — внутренний отступ, внешний отступ, смещение и трансформация. Каждый решает свою задачу. Ниже — какой выбрать, с примерами, сценариями и проверкой знаний.
Главное различие: «внутри» и «снаружи»
Прежде чем что-то двигать, ответьте на один вопрос: мы двигаем сам блок или текст внутри блока?
- Двигаем содержимое внутри — используем
padding(внутренний отступ). - Двигаем блок целиком среди соседей — используем
margin(внешний отступ). - Нужна «красная строка» —
text-indent. - Нужно подвинуть «на глаз», не сдвигая соседей —
transform: translate()илиposition.
| Инструмент | Что двигает | Влияет на соседей | Когда использовать |
|---|---|---|---|
padding |
содержимое внутри | нет | отодвинуть текст от края |
margin |
весь блок | да | расстояние между блоками |
text-indent |
первую строку | нет | красная строка |
transform |
визуально | нет | точная мелкая правка |
Вкладки: четыре способа с кодом
.text {
padding-left: 24px; /* сдвинуть текст вправо */
padding-right: 24px; /* сдвинуть текст влево */
}Самый предсказуемый способ. Фон блока при этом закрашивает и отступ.
.block {
padding-top: 12px;
padding-bottom: 12px;
}Если нужно сдвинуть вниз весь блок, а не текст — используйте margin-top.
p {
text-indent: 3em; /* 1em ≈ высота шрифта */
}Работает только на первую строку абзаца. Классическая «красная строка».
.text {
display: inline-block;
transform: translateY(2px); /* опустить ровно на 2px */
}Сдвиг «визуальный»: соседние элементы остаются на месте.
Практика: три частые задачи
1. Заголовок с отбивкой слева
- Задайте заголовку левый внутренний отступ.
- Добавьте декоративную линию слева (псевдоэлемент или
border-left).
.title {
padding-left: 16px;
border-left: 4px solid #003F8F;
}2. Кнопка с «воздухом» внутри
.btn { padding: 12px 24px; } /* текст не прилипает к краям */Это внутренний отступ: визуально кнопка становится крупнее, но её положение среди соседей не меняется.
3. Иконка чуть ниже текста
.icon { display: inline-block; transform: translateY(1px); }Один-два пикселя — и иконка «садится» на базовую линию текста.
position: relative — на другом экране всё «поедет». Для расстояний используйте margin/padding, а точечные сдвиги — только на 1–3 px.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Текст прилип к краю | нет padding |
добавить внутренний отступ |
| Блок «наехал» на соседний | использован margin, а нужно «внутри» |
заменить на padding |
| Сдвинулось всё вокруг | меняли margin вместо transform |
использовать translate |
| На телефоне «уехало» | большой фиксированный отступ | относительные единицы + медиазапросы |
Проверьте себя
Вопросы и ответы
padding — отступ внутри (фон закрашивается), margin — снаружи (фон не закрашивается).
Через text-indent — он действует только на первую строку абзаца.
Вы меняли margin (влияет на поток). Для сдвига без последствий — transform: translate().
em/rem масштабируются вместе со шрифтом — удобно и доступно. px — когда нужна фиксированная точность.
Добавьте margin-top, если допустимо сдвинуть соседей, или position: relative; top: 4px, если нужно только визуально.
Итоги
- Внутри блока —
padding, снаружи —margin. - Красная строка —
text-indent. - Точная правка —
transform: translate(). - Не двигайте большие блоки «на глаз» — проверяйте адаптив.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.