Выбор ответа Junior Блочная модель спрашивают часто обновлено
Итоговая ширина при content-box
Вопрос
Какую ширину займёт блок на экране (без учёта margin)? box-sizing по умолчанию.
.card {
width: 200px;
padding: 20px;
border: 5px solid;
margin: 10px;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: 250px. По умолчанию box-sizing: content-box, и width задаёт только content.
Варианты ответа
- 200px
- 240px
- 250pxправильный ответ
- 270px
Разбор
По умолчанию box-sizing: content-box, и width задаёт только content. Сверху прибавляются padding 20 × 2 и border 5 × 2: 200 + 40 + 10 = 250px. 200px было бы при border-box, 240px забывает про border, 270px ошибочно добавляет margin, который в ширину коробки не входит.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.