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

Каждый HTML-элемент можно представить как прямоугольный блок.

Этот блок состоит из нескольких частей:

margin
border
padding
content

Структура блока:

---

Внутренний отступ (padding)

Padding — это расстояние между содержимым элемента и его границей.

Свойство:

padding

Пример:

p {
padding: 20px;
}

Это добавит внутренний отступ внутри элемента.

---

Внешний отступ (margin)

Margin — это расстояние между элементами.

Свойство:

margin

Пример:

p {
margin: 20px;
}

Это создаст расстояние между абзацами.

---

Граница элемента (border)

Граница создаётся с помощью свойства:

border

Пример:

p {
border: 1px solid black;
}

Разбор:

• 1px — толщина линии
• solid — тип линии
• black — цвет

---

Типы границ

CSS поддерживает разные типы линий.

Примеры:

border: 1px solid black;
border: 2px dashed red;
border: 3px dotted blue;

---

Отступы по сторонам

Можно задавать отступы отдельно для каждой стороны.

Padding

padding-top
padding-bottom
padding-left
padding-right

Пример:

p {
padding-top: 10px;
}

Margin

margin-top
margin-bottom
margin-left
margin-right

Пример:

p {
margin-bottom: 30px;
}

---

Пример блока

HTML:

<div class="card">
Текст блока
</div>

CSS:

.card {
border: 1px solid black;
padding: 20px;
margin: 20px;
}

Результат:

• вокруг текста появится граница
• внутри блока будет отступ
• между блоками появится расстояние

---

Пример оформления страницы

HTML:

<h1>Мой сайт</h1>

<p>Первый абзац текста</p>

<p>Второй абзац текста</p>

CSS:

h1 {
margin-bottom: 30px;
}

p {
border: 1px solid gray;
padding: 15px;
margin-bottom: 20px;
}

---

Рекомендации

При работе с отступами рекомендуется:

• использовать одинаковые отступы для элементов;
• избегать слишком больших расстояний;
• использовать margin для расстояния между элементами;
• использовать padding для расстояния внутри элемента.