По умолчанию каждый элемент HTML отображается в браузере в виде прямоугольника. Размеры этого прямоугольника динамичны: они меняются в зависимости от содержимого данного элемента. Вы можете рассматривать эти прямоугольники как жидкость, изменяющую свою форму, чтобы соответствовать содержимому.
Это потому, что веб-страница является живым элементом: просто измените размер окна браузера и увидите, как большинство элементов адаптируется автоматически в пределах доступного пространства.
Это поведение по умолчанию веб-страницы. Но поскольку дизайн веб-страницы часто требует закрепить элементы на месте, с заданными размерами, CSS позволяет поменять или даже отменить это поведение жидкости.
Блочный элемент, такой как абзац, будет занимать всё пространство по горизонтали, которым по умолчанию является ширина вашего браузера. Вертикально этот абзац будет адаптировать свою высоту к размеру содержимого.
При расчёте учитываются многие параметры: размер содержимого, используемый шрифт, его размер, интервалы, отступы, границы, позиционирование.
Оригинал доступен по адресу: http://marksheet.io/css-box-model.html
Джереми Томас
Фронтенд-дизайнер, работает в компании Improbable в солнечном Лондоне. Разработчик CSS-фронтенда Bulma.