Коротко: опустить кнопку вниз в CSS можно несколькими способами: margin-top (просто сдвинуть), margin-top: auto во flex-колонке (прижать к низу), align-self: flex-end (вниз по поперечной оси), position: absolute; bottom: 0 (приклеить к низу родителя) или transform: translateY(). Выбор зависит от того, что именно нужно.
Выбор способа
| Задача | Способ |
|---|---|
| Сдвинуть вниз на пару пикселей | margin-top |
| Прижать к низу карточки | margin-top: auto во flex-колонке |
| Кнопка в углу блока | position: absolute; bottom: 0 |
| Сдвиг без влияния на соседей | transform: translateY() |
Вкладки: способы с кодом
.btn { margin-top: 24px; }Самый простой сдвиг: добавляет отступ сверху. Подходит, когда кнопка идёт после текста в обычном потоке.
.card {
display: flex;
flex-direction: column;
min-height: 320px;
}
.card .btn { margin-top: auto; } /* прижмёт кнопку к низу */Лучший способ для карточек: кнопка «прилипает» к низу, сколько бы текста ни было. Родителю нужна flex-direction: column и высота.
.card { position: relative; padding-bottom: 64px; }
.card .btn {
position: absolute;
left: 16px; right: 16px; bottom: 16px;
}Кнопка тянется по низу карточки. Не забудьте padding-bottom, иначе текст заедет под кнопку.
.btn { transform: translateY(8px); }Сдвигает визуально, не меняя место в потоке. Удобно для мелких «подстроек» и анимаций при наведении.
Практика: карточка товара с кнопкой внизу
- Карточке задайте
display: flex; flex-direction: column;. - Дайте карточкам одинаковую
min-heightили растяните сетку. - Кнопке поставьте
margin-top: auto;. - Проверьте с коротким и длинным описанием — кнопки должны быть на одной линии.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Кнопки на разной высоте | нет flex-колонки и auto | margin-top: auto |
| Текст под кнопкой | нет padding-bottom |
добавить отступ родителю |
| Кнопка уехала вверх | родитель не relative | position: relative |
| Сдвиг «дёргает» вёрстку | margin меняет поток | использовать translateY |
Проверьте себя
Вопросы и ответы
margin меняет положение в потоке и сдвигает соседей. transform только визуально двигает элемент, не влияя на раскладку.
Если это кнопка «внизу экрана», используйте position: fixed; bottom: 16px;. Для прижатия к подвалу — flex-колонку с margin-top: auto у подвала.
В grid по вертикали работает align-self: end или margin-top: auto внутри ячейки. Часто достаточно align-self.
Через vertical-align у инлайн-элементов или flex с align-items: flex-end у контейнера.
Итоги
- Мелкий сдвиг —
margin-topилиtranslateY. - Прижать к низу карточки —
margin-top: autoво flex-колонке. - В угол блока —
position: absolute; bottom: 0сposition: relativeу родителя. - При absolute не забывайте отступ родителя.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.