Коротко: опустить текст вниз можно отступом сверху, выравниванием к низу блока или точным смещением. Главное — выбрать способ, который не «поедет» на другом экране.
Кому и зачемНужно, когда текст «прилип» к верху, кнопку надо прижать к низу карточки, а подпись — к нижнему краю изображения. Ниже три способа и типичные ошибки.
Три способа
CSS
.block { padding-top: 40px; }Добавляет пространство сверху — текст «опускается». Влияет на высоту блока.
CSS
.block {
display: flex;
align-items: flex-end; /* содержимое к низу */
min-height: 200px;
}Надёжно, когда нужен текст у нижнего края блока. Классика — кнопка внизу карточки.
CSS
.text { position: relative; top: 6px; }Точное смещение без влияния на соседей. Для 1–3 px — то, что нужно.
Практика: три задачи
1. Кнопка внизу карточки
- Карточке задайте
display: flex; flex-direction: column. - Кнопке —
margin-top: auto(прижмётся к низу). - Проверьте, что карточки одинаковой высоты (grid/flex).
2. Подпись внизу изображения
CSS
.hero { position: relative; }
.hero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; color: #fff; }3. Текст чуть ниже с иконкой
CSS
.icon { display: inline-block; vertical-align: middle; transform: translateY(2px); }Не «на глаз»Не двигайте большие блоки десятками пикселей через
position: relative — на другом экране всё сместится. Для расстояний используйте padding/margin.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Текст «уезжает» на телефоне | большой фиксированный отступ | относительные единицы + медиазапросы |
| Кнопка не внизу | нет margin-top:auto |
flex-колонка + auto |
| Текст «не по центру» | влияет line-height |
выровнять flex/line-height |
| Соседи сдвинулись | использован margin |
translateY для точечной правки |
Проверьте себя
Чек-лист
Как прижать кнопку к низу карточки?
Вопросы и ответы
padding — внутри блока, margin — снаружи. Для «опустить текст внутри» — padding.
transform: translateY(2px) — не влияет на соседние элементы.
Скачут отступы или высота контейнера. Задайте min-height и используйте flex.
Если это футер — прижмите его через flex и margin-top:auto у колонки-обёртки страницы.
Итоги
- Отступ сверху —
padding-top. - К низу — flex
align-items: flex-endилиmargin-top:auto. - Мелкая правка —
translateY.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.