Стандартная блочная модель отвечает на основной вопрос:

Сколько же в итоге места будет занимать бокс?

Ответ следующий:

Область, занимаемая блочным боксом, складывается из его ширины и высоты содержания, внутренних и внешних отступов, ширины рамок.

Для строчных боксов есть свои особенности, которые мы опишем позже.

Схема блочной модели:

• ширина/высота содержания — свойства width и height (синий прямоугольник на схеме);
• внутренние отступы — свойство padding;
• рамки — свойство border;
• внешние отступы — свойство margin.