Выбор ответа Senior Адаптивность обновлено
Процентный padding по вертикали
Вопрос
Родитель шириной 400px, внутри блок высотой 100px. Каким будет у блока padding-top: 50%?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: 200px: проценты в padding считаются от ширины родителя. Процентные padding и margin по всем сторонам считаются от ширины containing block (для обычного горизонтального письма).
Варианты ответа
- 50px: проценты по вертикали считаются от высоты блока
- Зависит от высоты родителя, а ширина тут ни при чём
- 200px: проценты в
paddingсчитаются от ширины родителяправильный ответ - 0: проценты в
paddingработают только по горизонтали
Разбор
Процентные padding и margin по всем сторонам считаются от ширины containing block (для обычного горизонтального письма). Родитель 400px в ширину, значит 200px. На этом держался старый трюк с пропорциями через padding-top: 56.25%, который сегодня заменяет aspect-ratio: 16 / 9. Высота блока и родителя здесь не участвует, а вертикальные проценты в padding работают.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.