Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

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

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

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

CSS -заполнение


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


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


CSS-заполнение

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

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


Прокладка - отдельные стороны

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

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

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

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

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

Пример

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

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}


Padding — сокращенное свойство

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

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

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

Итак, вот как это работает:

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

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

Пример

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

div {
  padding: 25px 50px 75px 100px;
}

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

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

Пример

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

div {
  padding: 25px 50px 75px;
}

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

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

Пример

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

div {
  padding: 25px 50px;
}

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

  • отступ: 25 пикселей;
    • все четыре отступа 25px

Пример

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

div {
  padding: 25px;
}

Отступы и ширина элемента

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

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

Пример

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

div {
  width: 300px;
  padding: 25px;
}

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

Пример

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

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Дополнительные примеры


В этом примере показано, как установить левое дополнение элемента <p>.


В этом примере показано, как установить правильное дополнение элемента <p>.


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


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


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

Упражнение:

Установите верхний отступ элемента <h1> на 30 пикселей.

<style>
h1 {
  : 30px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


Все свойства заполнения CSS

Property Description
padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element