Блочная модель верстки HTML/CSS
При верстке сайтов или различных правках уже готового кода, необходимо знать что такое блочная модель. Это обязательно для грамотной работы со связкой технологий HTML/CSS.
Часть HTML-элементов, которые можно найти в коде страницы являются блочными изначально. Это относится к тэгам <h1>-<h6>, <p>, <div>, <ol>, <ul>, <li>.
Остальные (например, <span>, <a>) можно сделать, и часто это просто необходимо в соответствии с поставленной задачей, блочными посредством средств CSS (имеется в виду свойство display). То есть работа с веб-страницей, это в основном работа с подобными элементами.
Все блочные элементы имеют одну и ту же структуру, которая представлена на рисунке ниже (немного похоже на хоккейные ворота).
Каждый блок содержит в себе информационную часть (его содержание, контент). Это может быть изображение, текст или еще что-то. К примеру, для любого элемента <p> (тег абзаца) содержимым будет его текст.
Вокруг контента могут находиться (в том числе и с нулевыми значениями) еще 3 области. Это отступы (padding), граница (border) и поля (margin), которые задаются одноименными свойствами CSS.
Кроме того, они не входят в ширину (width) блока. Это очень важное замечание. Запомните его! Задавая ширину блочного элемента, мы задаем ширину только той его части, где содержится контент (только центрального прямоугольника на рисунке).
Отступы идут сразу вокруг области с контентом, они обеспечивают более привлекательный с точки зрения дизайна вид. Здесь можно провести аналогию с отступами, которые задаются при печати бумаги на принтере. Если бы они не были установлены, то текст начинался бы с самого края листа. То есть отступы – это то, что находится между контентом и границей.
За отступами идет граница блока. Она имеет настраиваемые в CSS ширину, цвет, оформление.
За границей блочного элемента следуют поля. Это дополнительное пространство, задаваемое вокруг границы блока.
В случае если вы немного запутались, небольшой пример
Допустим, вы хотите, чтобы правая и левая границы блока находились друг от друга на расстоянии 740px, а текст с обеих сторон не прижимался вплотную к границам, а имел промежутки по 20px.
В этом случае надо задать width 700px (не 740px), а левый и правый padding 20px.
700px + 20px + 20px = 740px.
Если border с обеих сторон, например, по 5px, то общая ширина всего блока, от границы до границы 740+5+5 = 750px.
Послесловие
Данная статья написана в рамках "гостевого поста" Михаилом, автором сайта thefamouspeople.ru. Спасибо ему за интересный и полезный материал.