05. Блочная модель и позиционирование

Что такое блочная модель

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

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

Пример CSS-кода


.card {
  margin: 16px;              /* внешний отступ */
  padding: 16px;             /* внутренний отступ */
  border: 2px solid #2f2f2f; /* граница */
  border-radius: 12px;       /* скругление углов */
  background-color: #1c1c1c; /* фон */
  color: #fff;               /* цвет текста */
  box-sizing: border-box;    /* включает отступы и границы в ширину */
}

Как это выглядит

Элемент

.card

выглядит как аккуратный прямоугольный блок с отступами, рамкой и скруглёнными углами. Если добавить несколько таких блоков, они будут красиво отделены друг от друга.

Свойство box-sizing

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

```
box-sizing: content-box;
```
— ширина элемента не включает padding и border (по умолчанию).
```
box-sizing: border-box;
```
— ширина включает padding и border (используется чаще всего).

Пример различий


/* Одинаковая ширина, но разный результат */
.box1 {
  width: 200px;
  padding: 20px;
  border: 5px solid #007bff;
  box-sizing: content-box;
}.box2 {
  width: 200px;
  padding: 20px;
  border: 5px solid #28a745;
  box-sizing: border-box;
}

Первая коробка будет больше, потому что padding и border добавятся к ширине. Вторая останется ровно 200px.

Отступы и выравнивание

```
margin
```
— внешний отступ. Можно задавать отдельно по сторонам:
```
margin-top
```
```
margin-left
```
и т.д.
```
padding
```
— внутренний отступ от содержимого до границы.
```
border
```
— толщина, стиль и цвет рамки.

Пример


.box {
  margin: 20px auto; /* центрирование по горизонтали */
  padding: 15px;
  border: 2px solid #555;
  width: 300px;
  background: #222;
  color: #eee;
  text-align: center;
}

Типы отображения элементов

Каждый HTML-элемент имеет тип отображения (display):

block — элемент занимает всю ширину (например, <div>, <p>, <section>)
inline — элемент идёт в одну строку (например, <span>, <a>)
inline-block — как строчный, но с поддержкой размеров и отступов

Пример


.block {
  display: block;
  background: #007bff;
  color: white;
  margin: 10px 0;
  padding: 10px;
}.inline {
  display: inline;
  background: #ffc107;
  color: black;
  padding: 5px;
}.inline-block {
  display: inline-block;
  background: #28a745;
  color: white;
  padding: 8px 16px;
  margin: 5px;
}

Позиционирование элементов

С помощью свойства

position

можно управлять расположением блока на странице.

static — стандартное положение (по потоку страницы).
relative — позиционирование относительно исходного места.
absolute — позиционирование относительно родителя с
```
position: relative
```
fixed — фиксированное положение на экране (например, шапка сайта).
sticky — прилипает при прокрутке (например, меню).

Пример позиционирования


.wrapper {
  position: relative;
  height: 200px;
  background: #2c2c2c;
}.box {
  width: 100px;
  height: 100px;
  background: #007bff;
  position: absolute;
  top: 50px;
  right: 30px;
}

Здесь синий квадрат (.box) будет расположен внутри родительского контейнера (.wrapper) справа сверху.

Практика: карточки товаров

HTML


<div class="cards">
  <div class="card">Товар 1</div>
  <div class="card">Товар 2</div>
  <div class="card">Товар 3</div>
</div>

CSS


.cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}.card {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 20px;
  color: white;
  width: 150px;
  text-align: center;
  transition: transform 0.2s;
}.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

Результат

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

Итоги урока

Теперь вы знаете:

Как работает блочная модель CSS.
Как использовать margin, padding, border и box-sizing.
Что такое display и position.
Как применять эти знания на практике для создания адаптивных блоков.