Войти
Регистрация

Поля и отступы у блоков в CSS

Поля и отступы у блоков

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

Каждый браузер для блочных элементов использует свои отступы по умолчанию. Например блочный тег абзаца <p> имеет по умолчанию поля сверху и снизу.

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

Если вдаваться в определение этих понятий, то:

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

Для примера давайте создадим страницу и добавим внутри тега <body> блок и в него вложим еще блок.

<body>
  <div class="div1">
    <div class="div2"></div>
  </div>
</body>

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

1. Поля в CSS

Поля задаются свойством margin, которое принимает 4 значения отступа: сверху, справа, снизу, слева.

Зададим нашему первому блоку поля размером в 10 пикселей:

.div1 {
   margin: 10px
}

Как видите у первого блока появились поля со всех сторон, которые отодвинули блок от его родителя, т.е. <body> на 10 пикселей.

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

.div1 {
   margin: 0 0 0 20px;
}

эта запись равносильна этой:

.div1 {
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 20px;
}

Отодвинули от родительского блока влево на 20 пикселей.

Для того, чтобы разместить блок по середине страницы сайта или родительского блока, пишем:

.div1 {
   margin: 0 auto;
}

Здесь мы установили поле сверху и снизу 0, а слева и справа поле рассчитывается автоматически так, чтобы наш блок встал по середине.

2. Отступы в CSS

Отступы задаются свойством padding, которое принимает 4 значения отступа: сверху, справа, снизу, слева.

Здесь на примере нашего же первого блока, с красной границей, покажу как работает отступ.

.div1 {
   padding: 10px;
}

Как видите, мы задали поля в 10 пикселей, которые оттолкнули внутренний блок со всех сторон на 10 пикселей. И сразу наш первый, красный блок, увеличился в ширину и высоту на 20 пикселей из-за отступов.

Отступы можно также, как и поля писать другим образом:

.div1 {
   padding: 0 0 0 20px;
}

Это равносильно следующему:

.div1 {
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 20px;
}

Также, чтобы сократить запись, если Вы хотите указать левый и правый отступ (поле) один, а верхний и нижний отступ (поле) другой, то можно сократить запись:

Вместо:

.div1 {
   padding: 10px 5px 10px 5px;
}

Напишите:

.div1 {
   padding: 10px 5px;
}

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?