Каждый элемент — прямоугольник из content, padding, border, margin. При content-box (по умолчанию) width задаёт только содержимое, а padding и border добавляются сверху. При border-box width включает padding и border — размеры предсказуемы, поэтому почти все проекты задают *, *::before, *::after { box-sizing: border-box }.
А ещё outline не занимает места и не влияет на раскладку
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
sotto.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 — ведёт себя как блок внутри строки.
sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.