Блочная и строчная модель в CSS

В этой статье учебника речь пойдет о такой фундаментальной теме как блочная и строчная модель CSS, рассмотрим на чем строятся эти модели, научимся с Вами работать как с внешними, так и с внутренними отступами, а также рассмотрим некоторые нюансы, которые могут возникнуть при работе с ними.

HTML теги взаимодействует со множеством CSS свойств, которые оказывают на них различные действия и определяют, как они будут отображены браузером. Условно эти свойства можно разделить на видимые для пользователя, например, такие как задний фон, или границы элемента, а другие нельзя определить явно, но они наравне со всеми участвуют в форматировании элементов. К ним, например, относятся такие свойства как внутренние и внешние отступы элемента.


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


В CSS создана специальная блочная модель (англ. box model), которая описывает, из чего состоит любой блок и от каких свойств зависят его размеры. В этой модели каждый блок состоит из четырёх областей:

Рис.74 Блочная модель CSS.

Рис. 74 Блочная модель CSS.

Внутренняя область (content area) – может содержать текст, изображения и другие теги, расположенные внутри содержимого. По умолчанию, размер внутренней области с содержимым задается свойствами width (ширина), min-width (минимальная ширина), max-width (максимальная ширина), height (высота), min-height (минимальная высота) и max-height (максимальная высота). Далее в учебнике мы рассмотрим, как и зачем изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.

Внутренние отступы или поля элемента (padding area) – по сути это пустая область, которая окружает внутреннюю область (контент). Размеры внутренних отступов могут задаваться как для всех сторон элемента, так и по отдельности с различных сторон содержимого.

Область рамки или границы элемента (border area) – окружает внутренние отступы элемента (padding area). Ширина, цвет и стиль границы может задаваться как для всех сторон элемента, так и по отдельности для каждой стороны.

Внешние отступы (margin area) – добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов. По аналогии с внутренними отступами размеры внешних отступов могут задаваться как для всех сторон элемента, так и по отдельности с различных сторон содержимого.

Теперь, когда Вы понимаете, на чем строится блочная модель CSS, пришло время рассмотреть каждую область элемента более детально.

Внешние и внутренние отступы элемента

Как мы с Вами установили выше, внутренние и внешние отступы добавляют промежуток вокруг содержимого элементов. Для управления этими отступами и отделения одного элемента от другого в CSS используется два универсальных свойства - margin для внешних отступов и padding для внутренних.

Давайте рассмотрим пример, в котором установим для первого изображения внутренние отступы, а для другого внешние отступы и посмотрим, что из этого выйдет:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования внешних и внутренних отступов в CSS</title>
<style> 
img {
width: 250px; /* устанавливаем ширину изображения 250px* /
}
.test {
margin: 10px; /* устанавливаем внешние отступы для всех сторон 10px */
}
.test2 {
padding: 10px; /* устанавливаем внутренние отступы для всех сторон 10px */
}
</style>
</head>
	<body>
		<img src = "kot_pid.jpeg" alt = "kot" class = "test">
		<img src = "kot_pid.jpeg" alt = "kot" class = "test2">
	</body>
</html>

Как вы можете заметить на изображении ниже, свойства padding (внутренние отступы) и margin (внешние отступы) визуально дают один и тот же эффект:

Рис. 75 Пример использования внешних и внутренних отступов в CSS.
Рис. 75 Пример использования внешних и внутренних отступов в CSS.

Но в чем же разница? Давайте рассмотрим пример, в котором зададим отступы чуть больше, добавим границу и задний фон для наших изображений.

<!DOCTYPE html>
<html>
<head>
	<title>Отличие внешних и внутренних отступов в CSS</title>
<style> 
img {
width: 250px; /* устанавливаем ширину изображения 250px */
border: 3px solid orange; /* устанавливаем сплошную границу размером 3 px оранжевого цвета */
background-color: khaki; /* устанавливаем цвет заднего фона */
}
.test {
margin: 30px; /* устанавливаем внешние отступы для всех сторон 30px */
}
.test2 {
padding: 30px; /* устанавливаем внутренние отступы для всех сторон 30px */
}
</style>
</head>
	<body>
		<img src = "kot_pid.jpeg" alt = "kot" class = "test">
		<img src = "kot_pid.jpeg" alt = "kot" class = "test2">
	</body>
</html>

Вот тут нам и пригодятся те знания, которые мы получили, когда внимательно читали про базовое понятие блочной модели. Внутренний отступ добавляет промежуток между содержимым и границей элемента, а внешний отступ добавляет пустое пространство вокруг элемента и определяет расстояние до соседнего элемента, по этим причинам задний фон мы можем увидеть только на втором изображении:

Рис. 76 Отличие внешних и внутренних отступов в CSS.
Рис. 76 Отличие внешних и внутренних отступов в CSS.

Для управления внутренними и внешними отступами вы можете использовать любые единицы измерения CSS. Ранее в статье учебника "Единицы измерения CSS, размер шрифта" мы уже с вами рассматривали, какие единицы измерения более предпочтительны к использованию.

В вышерассмотренных примерах мы использовали универсальные свойства, которые задают отступы для всех сторон, мы к ним еще вернемся позднее, а сейчас хотелось бы продемонстрировать Вам, что в CSS допускается задавать отступы по отдельности для каждой из сторон. Для этих целей существует по 4 (четыре) CSS свойства для внутренних и внешних отступов, их легко запомнить, так как достаточно через дефис добавить к "универсальному свойству" название необходимой стороны:

Для внутренних отступов:

Для внешних отступов:

Давайте рассмотрим пример, в котором мы зададим внешний отступ для элемента, используя при этом процентные значения:

<!DOCTYPE html>
<html>
<head>
	<title>Указание внешних отступов в процентах в CSS</title>
<style> 
img {
width: 25%;
margin-left: 15%;
}
</style>
</head>
	<body>
		<img src = "kot_pid.jpeg" alt = "kot" >
		<img src = "kot_pid.jpeg" alt = "kot" >
	</body>
</html>

Мы с вами уже разбирали, как использовать процентные значения, но в нашем случае еще один пример лишним не будет. Что мы видим здесь, браузер вычисляет размер внешних отступов на основе ширины контейнера (блока) родительского элемента, в котором находятся изображения. В нашем случае контейнером (родительским элементом) является элемент <body>, который имеет ширину в окне моего браузера 700 пикселей.

Значит, внешний отступ от левого края каждого изображения составит:

700px (Ширина контейнера) * 15% (внешний отступ слева) = 105px.

Размер изображения высчитывается по аналогии:

700px (Ширина контейнера) * 25% (размер изображения) = 175px.

Данный пример нам дает адаптивность, так как если вы захотите изменить размер окна браузера, то размер изображений и размер внешних отступов тоже изменится в зависимости от ширины контейнера (блока). Что касается высоты (height), то браузер вычисляет её самостоятельно (значение этого свойства по умолчанию - auto).

Рис. 77 Указание внешних отступов в процентах в CSS.
Рис. 77 Указание внешних отступов в процентах в CSS.

Мы не просто так начали изучение внешних и внутренних отступов, используя универсальные свойства margin и padding. Почему универсальные? Все просто, мы можем быстро установить значения отступов для всех четырех параметров одновременно в одном объявлении, при этом значения мы можем указывать совершенно разные, главное при этом соблюдать определённый порядок. Зачастую удобнее указать все свойства в одном объявлении, чем использовать для каждой стороны по отдельности свое свойство.

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

padding : 5px 10px 15px 20px;

При указании четырёх значений (5px 10px 15px 20px) - порядок расстановки внутренних отступов будет следующий: Top (5px) - Right (10px) - Bottom (15px) - Left (20px).

Справочно: Для запоминания порядка расстановки внутренних отступов в одном объявлении рекомендуют использовать английское слово TRouBLe(где: T - top, R - right, B - bottom, L - left).

padding : 5px 10px 15px;

При указании трёх значений (5px 10px 15px) - порядок расстановки внутренних отступов будет следующий: Top (5px) - Right & Left (10px) – Bottom (15px).

padding : 5px 10px;

При указании двух значений (5px 10px) - первое значение (5px) будет задавать размер внутреннего отступа от верха и от низа содержимого элемента, второе (10px) значение - внутренние отступы слева и справа содержимого элемента.

padding : 5px;

При указании одного значения (5px) - внутренний отступ со всех сторон будет одного размера - 5px.

Обращаю Ваше внимание, что если вам необходимо задать для какой-либо стороны нулевое значение, то единицы измерения при этом указывать не нужно. Например, укажем 1em для внутреннего отступа с левой и правой стороны, а для верха и низа зададим 0 (отсутствие отступа):

padding : 0 1em;

Как вы можете догадаться, для внешних отступов (margin) синтаксис аналогичен внутренним отступам (padding), давайте сразу рассмотрим на следующем примере:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания внешних отступов для элемента</title>
<style> 
h1 {
margin: 15px 20% 2em; /* порядок расстановки внешних отступов будет следующий: Top (15px) - Right & Left (20%) - Bottom (2em) */
}
.primer1, .primer2, .primer3 { /* создаем групповой селектор */
width: 50px; /* задаём ширину блока */
height: 50px; /* задаём высоту блока */
}
.primer1 {
background-color: yellow; /* задаём цвет заднего фона */
margin: 2em; /* величина внешнего отступа со всех сторон будет одного размера – 2em */
}
.primer2 {
background-color: lime; /* задаём цвет заднего фона */
margin: 25px 75px; /* первое значение(25px) будет задавать размер внешнего отступа от верха и от низа, второе (75px) значение – внешние отступы слева и справа */
}
.primer3 {
background-color: blue; /* задаём цвет заднего фона */
margin: -40px 25px 25px 100px; /* порядок расстановки внешних отступов будет следующий: Top(- 40px) - Right(25px) - Bottom(25px) - Left(100px). */
}
</style>
</head>
	<body>
		<h1>Заголовок первого уровня</h1>
		<div class = "primer1"></div>
		<div class = "primer2"></div>
		<div class = "primer3"></div>
	</body>
</html>

В данном примере используется практически все, что вам надо знать для работы с внешними отступами. И так, что мы сделали в этом примере:


Обращаю Ваше внимание, что допускается использовать отрицательные значения для внешних отступов (margin). Для внутренних отступов (padding) отрицательные значения использовать не допускается.


Результат нашего примера:

Рис.78 Пример указания внешних отступов для элемента.
Рис.78 Пример указания внешних отступов для элемента.

Нюансы работы с внешними отступами в CSS

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания внешних отступов (нюансы применения)</title>
<style> 
.primer1 {
margin-bottom: 10px; /* устанавливаем внешний отступ снизу 30px */
}
.primer2 {
margin-top: 20px; /* устанавливаем внешний отступ сверху 20px */
}
</style>
</head>
	<body>
		<p class = "primer1">Хорошо живёт на свете Винни Пух.</p>
		<p class = "primer2">От того поёт он эти песни вслух.</p>
	</body>
</html>

В данном примере мы указываем для класса .primer1 значение нижнего внешнего отступа равным 10px, а для второго класса .primer2 значение верхнего внешнего отступа 20px. После этого мы разместили два абзаца (HTML тег <p>) один под другим и задали им наши классы.

По логике расстояние между ними должно быть 30px (10px внешнего отступа снизу с первого класса + 20px внешнего отступа сверху второго элемента), а по факту мы получили отступ 20px, так как браузер выбрал большее. Обязательно при верстке учитывайте этот момент.

Как вы можете заметить значение отступа снизу у второго абзаца равно 16px - это значение, которое установлено браузером по умолчанию.

Рис. 79 Пример указания внешних отступов (нюансы применения).
Рис. 79 Пример указания внешних отступов (нюансы применения).

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

Строчные (линейные) элементы

Мы с Вами разобрали, что все браузеры обрабатывают элементы на веб-странице подобно блочному элементу, на самом деле не все так однозначно.

В CSS существует два типа элементов:

Важной особенностью блочных элементов является то, что они создают разрыв строки перед тегом и после него. Например, под эти критерии подходят такие элементы как таблицы (HTML тег <table>), маркированные и нумерованные списки (HTML теги <ul> и <ol>), элементы списков (HTML тег <li>), абзацы (HTML тег <p>) и так далее.

Что касается строчных (inline) элементов, то они не создают разрывов строк перед элементами и после них, а отображаются в одной строке с содержимым. Например, вы форматируете слово из предложения элементом <b> (определяет жирное начертание текста), то это слово по-прежнему будет располагаться на одной строке с текстом, который, заключен в блочный элемент <p> (абзац).

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

Давайте рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания внешних и внутренних отступов для строчных элементов</title>
<style> 
b {
margin: 50px; /* устанавливаем внешние отступы для всех сторон 50px */
padding: 50px; /* устанавливаем внутренние отступы для всех сторон 30px */
}
</style>
</head>
	<body>
		<p class = "primer1">Хорошо <b>живёт</b> на свете Винни Пух.</p>
		<p>От того поёт он эти песни вслух.</p>
	</body>
</html>

Мы добавили внутренние и внешние отступы со всех сторон по 50px, установили границу и задний фон к строчному элементу. Что мы видим в результате:

  1. Через установку верхнего или нижнего отступа увеличить высоту строчного элемента не получится.
  2. Браузер добавляет отступы только с левой и правой сторон элемента.
  3. Задний фон и граница элемента наслаивается на соседний элемент (см. 1 пункт).

Результат нашего примера:

Рис. 80 Пример указания внешних и внутренних отступов для строчных элементов.
Рис. 80 Пример указания внешних и внутренних отступов для строчных элементов.

Но как говорится на каждую хитрую строку найдется свой display : inline-block:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания внешних и внутренних отступов для блочно-строчных элементов</title>
<style> 
b {
display: inline-block; /* устанавливаем, что элементы выстраиваются в линейку (становятся блочно-строчные) */
margin: 50px; /* устанавливаем внешние отступы для всех сторон 50px */
padding: 50px; /* устанавливаем внутренние отступы для всех сторон 50px */
background-color: khaki; /* устанавливаем цвет заднего фона */
border: 1px solid; /* устанавливаем сплошную границу размером 1 пиксель (черный цвет по умолчанию)  */
}
</style>
</head>
	<body>
		<p>Хорошо <b>живёт</b> на свете Винни Пух.</p>
		<p>От того поёт он эти песни вслух.</p>
	</body>
</html>

Это свойство хоть и оставляет элемент как строчный, но он будет восприниматься браузером как блочный, что позволит нам указывать для него все те свойства, которые мы указывали для блочных элементов, включая внешние и внутренние отступы. Такие элементы иногда называют как блочно-строчные.

Результат нашего примера:

Рис. 81 Пример указания внешних и внутренних отступов для блочно-строчных элементов.
Рис. 81 Пример указания внешних и внутренних отступов для блочно-строчных элементов.

Свойство display имеет очень широкое применение, ведь благодаря ему, мы можем заставить строчные элементы вести себя как блочные, или наоборот блочные элементы сделать строчными, и даже сделать элементы резиновыми (флекс), но об этом позднее.

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

селектор {
display: inline;
}

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

селектор {
display: block;
}

Забегая вперед, хочу сказать, что вы сможете свойством display со значением none при необходимости скрывать тот или иной элемент в зависимости от разрешения, или устройства пользователя (адаптивный дизайн). Кроме того, это свойство активно применяется при работе различных скриптов.



Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующую страницу (создание вертикального меню навигации):

    Практическое задание № 20.
    Практическое задание № 20.

    Подсказка: чтобы сформировать подобное меню Вам необходимо воспользоваться маркированным списком. Подробную информацию о использовании маркированных списков Вы сможете найти в предыдущей статье учебника "Работа со списками в CSS". Подумайте, что необходимо сделать, чтобы Вы смогли указать для гиперссылок внутренние отступы, и не забудьте указать, что при наведении на них цвет заднего фона меняется на orangered.

    Продвинутое задание (создание горизонтального меню навигации):

    Практическое задание № 21.
    Практическое задание № 21.

    Подсказка: подумайте, что необходимо сделать с элеметами маркированного списка, чтобы они выстроились в линейку?

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.