Блоковая модель (box model)

Суть блоковой модели таблиц стилей заключается в том, что на экране браузера все HTML-элементы веб-страницы отображаются в виде прямоугольных блоков. При этом границы этих блоков не всегда видны, но тем не менее каждый выводимый элемент состоит из четырех вложенных друг в друга прямоугольных областей.

Блоковая модель CSS

Первая область — это content, т.е. основное содержание элемента, например текст или изображение. Далее идет пустая область внутренних отступов (padding), на которую распространяется установленный для элемента фоновый цвет или фоновое изображение. Затем идет рамка элемента (border). А после рамки следует невидимая область внешних отступов (margin), которая задает расстояние от соседних элементов или границ экрана.

Основное содержание

Каскадные таблицы позволяют устанавливать любые размеры для перечисленных областей элементов. Например, задать размеры основного содержимого элемента, т. е. области content, можно с помощью свойств таблиц стилей width и height, т. е. ширина и высота:

h1 {
  width: 500px;
  height: 50px;
}

Внутренние отступы

Внутренние отступы элементов задаются с помощью свойств семейства padding. Например, чтобы задать верхний внутренний отступ для тега h1 можно создать следующее CSS-правило:

h1 {
  padding-top: 30px;
}

Аналогичным образом задаются внутренние отступы для других сторон прямоугольной области элемента:

h1 {
  padding-top: 30px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 60px;
}

Для указания внутренних отступов элемента со всех сторон можно также использовать сокращенную запись со свойством padding. При этом значения отступов перечисляются в строго заданном порядке: верхний (top), правый (right), нижний (bottom), а затем левый (left). Таким образом, приведенный выше пример можно переписать следующим образом:

h1 {
  padding: 30px 20px 10px 60px;
}

Возможны также следующие варианты сокращенной записи:

h1 {
  // сверху — 20 px, справа и слева — 50 px, снизу — 10px
  padding: 20px 50px 10px;

  // сверху и снизу — 30px, справа и слева — 40px
  padding: 30px 40px;

  // все внутренние отступы 5px
  padding: 5px;
}

Рамка

Рамка элемента задается с помощью CSS свойств семейства border:

  • border-style
  • border-width
  • border-color

Свойство border-style определяет стиль рамки. Например, следующее CSS-правило создает рамку вокруг элемента в виде пунктирной линии:

h1 {
  border-style: dashed;
}

Возможны следующие значения свойства border-style:

  • dashed – пунктирная линия со штрихами
  • dotted — пунктирная линия с точками
  • double — двойная линия
  • groove — линия с выемкой
  • hidden — скрытая линия
  • inherit — наследует значение от родительского элемента
  • initial — возвращает свойство к значению по-умолчанию
  • inset — создает эффект вдавленного блока
  • none — рамка отсутствует
  • outset — создает эффект выступающего блока
  • solid – обычная линия

Свойство border-width задает ширину рамки:

h1 {
  border-style: solid;
  border-width: 10px;
}

Свойство border-color устанавливает цвет рамки:

h1 {
  border-style: solid;
  border-color: red;
}

Для свойств семейства border допустима сокращенная запись:

h1 {
  border: 10px solid red;
}

В этой записи значения свойств border-width, border-style и border-color должны быть перечислены через пробел именно в этом порядке.

Внешние отступы

Внешние отступы задаются с помощью CSS-свойств семейства margin. Например, для задания внешних отступов вокруг тега h1 можно использовать следующее CSS-правило:

h1 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 0;
  margin-left: 10px;
}

Данное правило можно сократить до следующей записи:

h1 {
  margin: 20px 30px 0 10px;
}

Часто для выравнивания блоков по центру экрана используется сокращенная запись, в которой в качестве значений отступов слева и справа задается ключевое слово auto, т. е. отступы устанавливаются автоматически:

h1 {
  margin: 0 auto;
}

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