Свойство padding

Свойство padding задаёт расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока (рис. 1).

padding

Рис. 1. padding

Основное предназначение padding — создать пустое пространство вокруг содержимого элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование padding повышает читабельность текста и улучшает внешний вид страницы. В примере 1 показано применение padding для оформления текста.

Пример 1. Использование padding

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   .space { 
    padding: 20px; /* Поля */
    background: #F6E8D7; /* Цвет фона */
    border: 2px solid #D6562B; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <div class="space">
   Они шли, чтобы покорить нас, чтобы пытать нас и сжигать живьем на кострах, 
   они шли, чтобы сделать с нами, вольными англичанами, то же самое, что 
   Кортес сделал с индейцами Анауака.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Поля вокруг текста

Рис. 2. Поля вокруг текста

Ячейки таблицы

Кроме блоков padding часто применяется для ячеек таблицы, опять же, для повышения читабельности текста. Свойство пришло на замену устаревшему атрибуту cellpadding, которое добавляется к элементу <table>. При этом padding следует использовать для селекторов td и th.

td, th { padding: 3px; }

Значения padding

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

Одно значение — определяет поля для всех сторон блока.

padding: все стороны;
padding: 10px;

Два значения — первое определяет поля сверху и снизу для элемента, второе слева и справа для элемента.

padding: верх-низ лево-право;
padding: 10px 20px;

Три значения — первое задаёт поле сверху для элемента, второе одновременно слева и справа, а третье снизу.

padding: верх лево-право низ;
padding: 10px 20px 5px;

Четыре значения — первое определяет поле сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

padding: верх право низ лево;
padding: 5px 10px 15px 20px;

В качестве единиц обычно используются пиксели, em, rem и др.

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

Проценты

В качестве значения padding можно использовать процентную запись, с которой связаны некоторые хитрости.

  • По горизонтали проценты считаются от ширины всего блока.
  • По вертикали проценты считаются от ширины всего блока.

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

Проценты можно сочетать с фиксированными значениями, получится что-то вроде этого.

padding: 10px 5%;

Сопутствующие свойства

Наряду с padding используются свойства padding-top, padding-right, padding-bottom, padding-left, которые, соответственно, задают значения сверху, справа, снизу и слева. Эти свойства применяются, когда требуется задать поле с одной-двух сторон или когда не следует затрагивать уже выставленное значение padding. В примере 2 показано создание маркированного списка. Расстояние от маркера до текста меняется с помощью свойства padding-left.

Пример 2. Маркированный список

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   li {
    padding-left: 10px; /* Расстояние от маркера до текста */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 3.

Список

Рис. 3. Список

Цвет фона

Свойство padding определяет пространство от границ до содержимого блока и это пространство заполняется фоновым цветом, заданным для всего блока. Данную особенность можно использовать для создания различных рамок. Так, если установить для <img> фоновый цвет, то он не будет виден, поскольку картинка его закрывает. Но если добавить padding, то фон расширится и тем самым мы получим одноцветную рамку вокруг изображения. Комбинируя padding и border можно создавать разные рамки, как показано в примере 3.

Пример 3. Рамка вокруг изображения

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   img {
    background: #818991; /* Цвет рамки */
    padding: 15px; /* Толщина рамки */
    border: 2px solid #ce242b; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <img src="image/thumb1.jpg" alt="">
  <img src="image/thumb2.jpg" alt="">
 </body>
</html>

Результат данного примера показан на рис. 4.

Рамка, созданная с помощью padding

Рис. 4. Рамка, созданная с помощью padding

Учтите, что этот способ подходит для изображений без прозрачных участков, иначе через «дыры» будет виден фоновый цвет.

Аналогичным образом делаются рамки и для блоков, но внутрь блока следует добавить <div>, для которого ставится фоновый цвет. Тем самым можно получить не только одноцветные рамки, но и градиентные, как показано в примере 4.

Пример 4. Градиентная рамка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   .gradient {
    /* Градиент */
    background: linear-gradient(to top, #cfe7fa, #6393c1);
    padding: 10px; /* Толщина рамки */
   }
   .gradient > div {
    background: #fff; /* Белый цвет фона */
    padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div class="gradient">
   <div>
    Очевидно, что внутридискретное арпеджио 
    заканчивает изоритмический фьюжн.
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 5.

Градиентная рамка, созданная с помощью padding

Рис. 5. Градиентная рамка, созданная с помощью padding

Перейти к заданиям

Жирность шрифта

Создайте веб-страницу, как показано на рис. 1.

Рис. 1

Для подключения шрифта используйте следующую ссылку:

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700" rel="stylesheet">

Сам шрифт в стилях указывается так:

font-family: Oswald, sans-serif;
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Жирность шрифта</title>
  <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700" rel="stylesheet">
  <style>
   div {
    font-family: 'Oswald', sans-serif;
    margin: 1rem 0; /* Отступ сверху и снизу */
    line-height: 2; /* Межстрочное расстояние */
   }
   span {
    background: #F9E3B2; /* Цвет фона */
    padding: 3px 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>
   Жирность шрифта:
   <span style="font-weight: 300">light</span>
   <span style="font-weight: 400">regular</span>
   <span style="font-weight: 500">medium</span>
   <span style="font-weight: 600">semi-bold</span>
   <span style="font-weight: 700">bold</span>
  </div>
 </body>
</html>

Семь чудес света

Создайте веб-страницу, как показано на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   ul { 
    font-family: sans-serif; /* Рубленый шрифт */
    list-style: none; /* Убираем маркеры */
    margin: 0; padding: 0; /* Обнуляем отступы */
   }
   li {
    background: #b18979; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 1rem; /* Поля вокруг текста */
    margin-bottom: 2px; /* Расстояние между */
   }
   /* Скругляем уголки сверху */
   li:first-child { border-radius: 7px 7px 0 0; }
   /* Скругляем уголки снизу */
   li:last-child { border-radius: 0 0 7px 7px; }
  </style>
 </head>
 <body>
  <ul>
   <li>Пирамида Хеопса</li>
   <li>Висячие сады Семирамиды</li>
   <li>Статуя Зевса в Олимпии</li>
   <li>Храм Артемиды в Эфесе</li>
   <li>Мавзолей в Галикарнасе</li>
   <li>Колосс Родосский</li>
   <li>Александрийский маяк</li>
  </ul>
 </body>
</html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 02.10.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid