Что такое блочная модель CSS и чем content-box отличается от border-box?
- Почему ширина элемента больше заданной в width?
Каждый элемент — прямоугольник из content, padding, border, margin. При content-box (по умолчанию) width задаёт только содержимое, а padding и border добавляются сверху. При border-box width включает padding и border — размеры предсказуемы, поэтому почти все проекты задают *, *::before, *::after { box-sizing: border-box }.
- margin не входит в размер элемента ни в одном режиме
- Вертикальные margin соседних блоков схлопываются (берётся больший)
- Внутри flex и grid схлопывания margin нет
А ещё outline не занимает места и не влияет на раскладку
Подробно
.card { width: 300px; padding: 20px; border: 2px solid; }
/* content-box: реальная ширина 300 + 40 + 4 = 344px */
/* border-box: реальная ширина 300px, содержимое 256px */Схлопывание margin: у соседних блоков по вертикали между ними остаётся больший из двух отступов, а не сумма. То же происходит между родителем и первым ребёнком, если у родителя нет padding, border или он не создаёт новый контекст форматирования.
Строчные элементы (inline) игнорируют width, height и вертикальные margin; inline-block — ведёт себя как блок внутри строки.
Что хотят услышать
- Четыре части модели.
- Разница box-sizing.
- Схлопывание margin.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗При content-box width уже включает padding и border; при border-box они добавляются к width
- ✓При border-box width включает padding и border; при content-box они добавляются к width
- ✗margin тоже входит в width при border-box
- ✗box-sizing влияет только на высоту блока
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.