Коротко: «двигать текст» в CSS можно несколькими способами: text-align (по горизонтали внутри блока), line-height и padding/margin (по вертикали), text-indent (отступ первой строки), position и transform (свободное смещение). Выбор зависит от того, куда и зачем двигать.
Куда именно двигать
| Задача | Свойство |
|---|---|
| По горизонтали внутри блока | text-align |
| Отступ первой строки | text-indent |
| Между строками | line-height |
| Отступы вокруг текста | margin, padding |
| Свободный сдвиг | position / transform |
Вкладки: способы с кодом
.title { text-align: center; } /* left | center | right | justify */Двигает текст по горизонтали внутри блока. justify растягивает строки по ширине (аккуратно с ним — появляются «дыры» между словами).
p { text-indent: 24px; } /* отступ первой строки */
p { margin-top: 16px; } /* отступ сверху */
p { padding-left: 12px; } /* внутренний отступ слева */text-indent — «красная строка». margin — снаружи, padding — внутри. Для сдвига целого блока текста используют margin/padding у родителя.
.text { line-height: 1.6; }line-height управляет расстоянием между строками и косвенно «двигает» текст по вертикали внутри строки. Значение без единиц (1.6) считается от размера шрифта — так удобнее всего.
.label {
position: relative;
top: 4px; /* сдвинуть вниз */
left: 8px; /* сдвинуть вправо */
}.label {
transform: translateY(4px); /* визуальный сдвиг */
}Свободное смещение: position: relative сдвигает относительно своего места, transform — только визуально, не влияя на соседей. Для мелких подстроек лучше transform.
text-align. Сдвиг целого блока — margin. Подстройка на пару пикселей — transform. Точное позиционирование поверх фона — position: absolute.Двигать текст в кнопке
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
}Двигать текст в кнопке «на глаз» не нужно — используйте flex-центрирование и одинаковые отступы. Тогда текст всегда по центру, независимо от длины.
Вертикальное выравнивание текста
| Ситуация | Решение |
|---|---|
| Текст в блоке фиксированной высоты | flex: align-items: center |
| Текст рядом с иконкой | vertical-align: middle |
| Текст поверх картинки | position: absolute внутри relative-родителя |
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| text-align не работает | у элемента нет ширины | задать display: block и ширину |
| Текст «вышел» за блок | сдвиг через position | уменьшить значение или использовать flex |
| Прыгает разметка | margin двигает соседей | использовать transform |
| Неровные строки | line-height без единиц | задать line-height: 1.6 |
Проверьте себя
Вопросы и ответы
Задать text-indent, например text-indent: 24px. Это отступ только первой строки.
Скорее всего блок не блочный или его ширина равна содержимому. Задайте display: block и ширину.
Flex-колонка с justify-content: flex-end, либо padding-top у родителя. Простой margin-top тоже сработает, но сдвинет и соседей.
Ограничьте блок, включите перенос (overflow-wrap: break-word) или обрезайте с многоточием через text-overflow: ellipsis.
Итоги
- Горизонтально —
text-align, первая строка —text-indent. - Отступы вокруг —
marginиpadding. - Между строк —
line-heightбез единиц. - Свободный сдвиг —
positionилиtransform.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.