Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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

Вспомним, какие свойства отвечают за ширину и высоту блока:

  • Внутренние отступы. В CSS за их установку отвечает свойство padding

  • Границы, устанавливающиеся свойством border

  • Внешние границы. За них отвечает свойство margin

  • Высота и ширина блока, устанавливаемые свойствами width и height

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

Реальный размер элемента получится при сложении значений всех этих свойств. Рассмотрим их

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

По своим значениям, свойства margin и padding достаточно похожи, за исключением того, «куда» устанавливаются отступы. padding делает отступы внутри элемента, тем самым увеличивая его в размерах

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

  • отступ сверху. Можно установить отдельно свойством padding-top

  • отступ справа. Можно установить отдельно свойством padding-right

  • отступ снизу. Можно установить отдельно свойством padding-bottom

  • отступ слева. Можно установить отдельно свойством padding-left

.element {
  padding: 10px 20px 30px 40px;
}

/* Эквивалентно записи */

.element {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Если внимательно посмотреть на пример выше, то можно заметить, что в качестве значения свойства padding использовалось только одно значение, а не четыре. Свойство padding может принимать несколько разных вариаций сокращённых записей:

  • Одно значение — устанавливает одинаковый отступ по всем сторонам сразу. Например, padding: 20px установит внутренний отступ в 20px сверху/справа/снизу/слева

  • Два значения — устанавливает отступы по вертикали и горизонтали. Например, padding: 20px 30px установит внутренний отступ в 20px сверху/снизу и 30px справа/слева

  • Три значения — устанавливает отступы сверху, по горизонтали и снизу. Например, padding: 20px 30px 40px установит внутренний отступ в 20px сверху, 30px справа/слева и 40px снизу

Все те же самые значения и сокращения используются для свойства margin, которое устанавливает внешние отступы.

Свойство margin не влияет на видимые размеры элементов, но на место отступов не смогут встать другие элементы, поэтому оно входит в формирование общего размера

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

Заметьте, что отступ между вторым и третьим элементом всего 40 пикселей, а не 60, как могло бы подуматься, ведь используется нижний отступ в 40 пикселей от второго элемента и 20 пикселей сверху от третьего. При этом внешние отступы не сложились, а был выбран наибольший из них.

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

Границы

Видимые границы элемента можно задать одним из двух свойств:

  • border

  • outline

Различие свойств в поведении:

  • border прямо влияет на блочную модель и размеры элемента

  • outline рисует границу «поверх» элемента и не влияет на его размеры

Их синтаксис похож, поэтому разберём только свойство border, которое является обобщённым для трёх свойств:

  • border-width — ширина границы

  • border-style — тип границы

  • border-color — цвет границы

Для установки ширины можно использовать любые известные сейчас единицы измерения: px, em, rem, % и т.д. На самом деле, свойство border-width тоже сокращённое свойство, что может сводить с ума. Если указано одно значение, то ширина устанавливается для всех сторон одновременно, что в большинстве случаев достаточно. Сокращения же повторяют сокращения свойств margin и padding

.border {
  /* Одного свойства недостаточно для создания границ */
  border-width: 2px;
}

Границы могут быть разного типа: сплошные, пунктирные и т.д. За определение типа границы отвечает свойство border-style, которое может принимать одно из значений:

  • dotted

  • dashed

  • solid

  • double

  • groove

  • ridge

  • inset

  • outset

  • none — отсутствие типа границ. Можно назвать это удалением границы

Здесь работает принцип: «лучше один раз увидеть, чем сто раз услышать»

Последнее свойство — border-color, которое устанавливает цвет границе. Вы можете использовать инструмент разработчика DevTools или специальные сайты, где даётся возможность выбрать цвет и получить его hex значение. Ссылка на один из таких сайтов будет в конце урока.

Зная все основные свойства, можно объединить их единым свойством border и записать значения границы, используя только его. Порядок указания не имеет значения, но обычно свойства указывают в той последовательности, в которой они были изучены: border: border-width border-style border-color.

.border {
  border: 1px solid #000;
}

Изменение блочной модели

На видимый размер элемента влияют следующие свойства:

  • width

  • height

  • padding

  • border

Например, итоговая ширина элемента получается из складывания ширины (свойство width), левого и правого внутреннего отступа (свойства padding-left/padding-right), левой и правой границы (свойства border-left/border-right).

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

Таким свойством является box-sizing. Его роль — определить, будут ли влиять свойства padding/border на формирование конечного размера элемента. Свойство принимает одно из двух значений:

  • content-box — значение по умолчанию. Значения padding и border будут добавлены к ширине блока

  • border-box — Значения padding и border не будут добавлены к ширине блока. Ширина блока определяется только контентом внутри или значениями width/height

Когда вы будете изучать вёрстку различных сайтов, то часто будете встречать вот такую запись в CSS:

* {
  box-sizing: border-box;
}

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

Изменение типа отображения элемента

HTML элементы можно поделить на несколько условных групп:

  • Блочные

  • Строчные

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

Для изменения типа отображения элемента используется свойство display. В качестве значения принимается тип отображения элемента: блочный, строчный, flex-контейнер, с которым вы скоро познакомитесь, и множество других значений. В этом уроке остановимся на трёх:

  • block

  • inline

  • inline-block

Эти значения уже встречались вам, даже если это незаметно. Каждый HTML элемент, по умолчанию, имеет установленное свойство display, например:

  • <p>, <div>, <section>, <ul> — имеют значение block

  • <span>, <strong>, <a> — имеют значение inline

Эти значения можно менять по своему усмотрению. Например, в определённом макете или на определённом разрешении необходимо <span> сделать блочным элементом. Для этого достаточно изменить одно свойство:

span {
  display: block;
}

Можно проделать и обратную операцию — превратить блочный элемент в строчный, тогда используется значение inline

p.inline {
  display: inline;
}

Поведение блоков будет таким, как уже было изучено: блочные элементы будут занимать всю доступную ширину, а строчные в зависимости от контента внутри, причём тип тега уже не будет играть роли.

Интересным значением является inline-block. По его названию кажется, что это одновременно и блочный и строчный элемент, но это не так. Такое отображение создаёт совершенно новый тип элемента, который ещё не встречался. Очень подробно про него можно прочитать в статье, которая указана в конце урока. Если вы хотите глубже в этом разобраться, то рекомендуем ознакомиться с ней.

А что же в практическом плане даёт значение inline-block?

  1. В отличие от inline есть возможность использовать свойства width и height. Обычный строчный элемент игнорирует эти свойства, так как размер определяется контентом внутри и не может быть изменён с помощью CSS

  2. На такой элемент свойства margin/padding/border применяются как на обычный блочный элемент

  3. В отличие от блочного элемента его могут «обтекать» другие элементы, то есть он может вести себя как обычный inline элемент

Важно: на inline-block элемент действуют все свойства шрифта, в том числе и межстрочный интервал. Это может приводить к дополнительным отступам, которые не ожидаются у элемента. Подробнее о межстрочном интервале будет в будущих уроках


Самостоятельная работа

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


Дополнительные материалы

  1. HTML COLOR CODES
  2. Удивительный и неизвестный inline-block

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
30 июня 16 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»