ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Padding - Отступы


Этот элемент имеет отступ 70px.

Попробуйте сами »

CSS Padding - Отступ

CSS свойство padding используется для создания пространства вокруг содержимого элемента внутри любых определенных границ.

Из CSS у вас есть полный контроль над отступами. Есть свойства для установки отступов для каждой стороны элемента (сверху, справа, снизу и слева).


Отступ - Отдельные стороны

CSS имеет свойства для указания отступов для каждой стороны элемента:

  • padding-top - отступ сверху
  • padding-right - отступ справа
  • padding-bottom - отступ снизу
  • padding-left - отступ слева

Все padding-свойства могут иметь следующие значения:

  • length (длина) - указывает отступ в px, pt, cm и т.д.
  • % (проценты) - задает отступ в % от ширины содержащего элемента
  • inherit (наследование) - указывает, что отступ должен быть унаследован от родительского элемента

Примечание: Отрицательные значения не допускаются.

Пример

Установите разные отступы для всех четырех сторон элемента <div> 

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
Попробуйте сами »

Padding - Сокращенные свойства

Чтобы сократить код, можно указать все свойства padding в одном свойстве.

Свойство padding является сокращенным свойством для следующих отдельных свойств padding:

  • padding-top - отступ сверху
  • padding-right - отступ справа
  • padding-bottom - отступ снизу
  • padding-left - отступ слева

Таким образом, вот как это работает:

Если свойство padding имеет четыре значения:

  • padding: 25px 50px 75px 100px;
    • отступ сверху 25px
    • отступ справа 50px
    • отступ снизу 75px
    • отступ слева 100px

Пример

Используйте сокращенное свойство padding с четырьмя значениями:

div {
  padding: 25px 50px 75px 100px;
}
Попробуйте сами »

Если свойство padding имеет три значения:

  • padding: 25px 50px 75px;
    • отступ сверху 25px
    • отступы справа и слева 50px
    • отступ снизу 75px

Пример

Используйте сокращенное свойство padding с тремя значениями:

div {
  padding: 25px 50px 75px;
}
Попробуйте сами »

Если свойство padding имеет два значения:

  • padding: 25px 50px;
    • отступы сверху и снизу 25px
    • отступы справа и слева 50px

Пример

Используйте сокращенное свойство padding с двумя значениями:

div {
  padding: 25px 50px;
}
Попробуйте сами »

Если свойство padding использует одно значение:

  • padding: 25px;
    • все четыре отступа 25px

Пример

Используйте сокращенное свойство padding с одним значением: 

div {
  padding: 25px;
}
Попробуйте сами »

Padding и элемент Width (ширина)

CSS свойство width определяет ширину области содержимого элемента. Область содержимого - это часть внутри отступа, границы и поля элемента (box model).

Таким образом, если элемент имеет указанную ширину, отступ, добавленный к этому элементу, будет добавлен к общей ширине элемента. Это часто нежелательный результат.

Пример

Здесь элемент <div> имеет ширину 300 пикселей. Однако фактическая ширина элемента <div> будет 350px (300px + 25px для левого отступа + 25px для правого отступа):

div {
  width: 300px;
  padding: 25px;
}
Попробуйте сами »

Чтобы сохранить ширину в 300 пикселей, независимо от величины заполнения, вы можете использовать свойство box-sizing. Это заставляет элемент сохранять свою ширину; если вы увеличите отступ, доступное пространство контента уменьшится.

Пример

Используйте свойство box-sizing, чтобы ширина составляла 300 пикселей независимо от размера отступа:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}
Попробуйте сами »

Больше примеров

Установите левый отступ
Этот пример демонстрирует, как установить левый отступ элемента <p>.

Установите правый отступ
Этот пример демонстрирует, как установить правый отступ элемента <p>.

Установите верхний отступ
Этот пример демонстрирует, как установить верхний отступ элемента <p>.

Установите нижний отступ
Этот пример демонстрирует, как установить нижний отступ элемента <p>.


Проверьте себя с помощью упражнений!


Все свойства CSS Padding

Свойство Описание
padding Сокращенное свойство для установки всех свойств psdding в одном объявлении
padding-bottom Устанавливает нижний отступ элемента
padding-left Устанавливает левый отступ элемента
padding-right Устанавливает правый отступ элемента
padding-top Устанавливает верхний отступ элемента