Блочная модель

Последнее обновление: 21.04.2016

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

Схематично блочную модель можно представить следующим образом:

Блочная модель в CSS 3

Пусть элемент расположен в каком-нибудь внешнем контейнере. Это может быть элемент body, div и так далее. От других элементов он отделяется некоторым расстоянием - внешним отступом, которое описывается свойством CSS margin. То есть свойство margin определяет расстояние от границы текущего элемента до других соседних элементов или до границ внешнего контейнера.

Далее начинается сам элемент. И в начале идет его граница, которая в CSS описывается свойством border.

После границы идет внутренний отступ, который в CSS описывается свойством padding. Внутренний отступ определяет расстояние от границы элемента до внутреннего содержимого.

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

Например, определим следующую веб-страницу:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				margin: 15px; /* внешний отступ */
				padding: 11px; /* внутренний отступ */
				border: 3px solid red; /* границы шириной в 3 пикселя сплошной красной линией */
			}
        </style>
    </head>
    <body>
		<div>
			<p>Первый блок</p>
		</div>
		<div>
			<p>Второй блок</p>
		</div>
    </body>
</html>

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

Просмотр кода элемента в Google Chrome

В Mozilla Firefox этот пункт называется Исследовать элемент.

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

Box Model в CSS 3

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

Если мы явным образом не указываем значения свойств margin, padding и border, то браузер применяет предустановленные значения.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850