Блочная модель описывает, как браузер рассчитывает размеры HTML-элементов. Каждый блок состоит из содержимого (content), внутренних отступов (padding), границы (border) и внешних отступов (margin).
Эти свойства складываются, формируя итоговые ширину и высоту элемента. Например, блоку с `width: 300px` и `padding: 20px` потребуется 340px места по горизонтали.
Понимание модели критично для верстки.
Блочная модель описывает, как браузер рассчитывает размеры HTML-элементов. Каждый блок состоит из содержимого (content), внутренних отступов (padding), границы (border) и внешних отступов (margin).
Эти свойства складываются, формируя итоговые ширину и высоту элемента. Например, блоку с `width: 300px` и `padding: 20px` потребуется 340px места по горизонтали.
Понимание модели критично для верстки. Она объясняет, почему элементы занимают больше места, чем кажется, и как управлять их расположением.
.box {
width: 200px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}
/* Итоговая ширина: 200 + 20*2 + 2*2 = 244px */
Всегда учитывайте padding, border и margin при расчете места для элемента.
Заинтересовало? Подписывайся на наш TG канал. Там уроки публикуются намного раньше!