Блочная модель

Блочная модель — алгоритм, по которому браузер рассчитывает размеры области (бокса), в которой находится элемент. Обычно ее изображают так:

Таким образом, чтобы узнать ширину и высоту бокса браузеру надо сложить следующие свойства:

Ш.Б = width + padding-right + padding-left + border-right + border-left + margin-right + margin-left 
В.Б = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

где Ш.Б — ширина бокса, В.Б — высота бокса, width — ширина контента элемента, height — высота контента элемента, padding — внутренний отступ элемента, border — рамка элемента, margin — внешний отступ элемента.

Здесь есть один нюанс. Обычно всем кажется, что свойства width и height задаются ширину и высоту элемента. Но это не так! Данные свойства отвечают за размеры контентной части элемента, а размеры бокса рассчитываются только по блочных модели.

Хорошо, мы рассмотрели как рассчитывается область бокса. Но как рассчитать сами размеры элемента? На самом деле размеры бокса можно упростить следующим образом:

Ш.Б = Ш.Э + margin-right + margin-left

В.Б = В.Э + margin-top + margin-bottom

где, Ш.Э — ширина высота элемента, В.Э — высота элемента.

Таким образом, чтобы рассчитать размеры элемента браузер суммирует свойства width / height, padding, border и margin:

Ш.Э = width + padding-right + padding-left + border-right + border-left

В.Э = height + padding-top + padding-bottom + border-top + border-bottom

Теперь закрепим теорию на практике. Рассмотрим пример, в котором рассчитаем ширину элемента .header:

.header{
    width: 960px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #000;    
}

Получилось, что ширина элемента 1002px. Давай теперь побудем на месте браузера и сами подставим значения в формулу:

ширина header = 960px + 20px + 20px + 1px + 1px + 0 + 0 = 1002px

Сделаем еще один эксперимент. В предыдущий пример добавим еще margin:

.header{
    width: 960px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #000;    
    margin: 20px;
}

Как видишь размер элемента не изменился, это доказывает, что margin не влияет на его размеры.

Хорошо, мы рассмотрели как браузер рассчитывает размеры элемента и бокса. Но в современных стандартах есть возможность менять стандартную блочную модель.

Свойство box-sizing

Box-sizing — свойство, которое позволяет переключить алгоритм расчета размеров элементов. Оно имеет несколько значений.

content-box

При этом значении браузер рассчитывает размеры элемента по стандартному алгоритму.

border-box

А вот значение border-box меняет стандартную блочную модель. При использование box-sizing: border-box свойства width и height начинают включать в себя значения padding и border. Проще говоря, width и height будут задавать ширину и высоту элемента, а не контентной области.

Рассмотрим пример:

.header{
    box-sizing: border-box;
    width: 960px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #000;
}

Когда мы проинспектируем элемент, то увидим, что ширина элемента уже равняется 960px. Также мы можем увидеть, что ширина контентной области стала 918px.

Блочная модель