базовый курс

ГРУППА КУРСА

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

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

Для примера создадим блок и установим ему внутренние отступы 30 пикселей, а внешние 50 пикселей. Чтобы видеть внешний отступ, создадим ещё один блок. Установим блокам рамки для определения края блока.

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
7
8
9
10
div
  {
  border: 1px solid Red;
  }

HTML код:

14
15
<div style="padding: 30px; margin: 50px">Контент</div>
<div>Соседний блок</div>

Обратите внимание - второй блок, которому не установлены отступы, не касается краёв страницы, а находится от них на определённом расстоянии. Это происходит потому, что у страницы есть свои внутренние отступы.

ВАЖНО: Внешние отступы соседних блоков не суммируются. Расстояние между блоками равно большему отступу. Например, если у одного блока margin равно 20 пикселей, а у второго блока margin равно 10 пикселей, то расстояние между блоками будет 20 пикселей.

Отступы можно установить с каждой стороны по-отдельности. Для установки внешних отступов используются свойства margin-left, margin-right, margin-top, margin-bottom, а для внутренних отступов используются свойства padding-left, padding-right, padding-top, padding-bottom.

Добавим на страницу блок и установим ему внутренние отступы сверху и слева:

16
<div style="padding-top: 10px; padding-left: 15px">Контент</div>

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

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

Пример:

17
<div style="margin: 50px 10px 20px 10px">Контент</div>