CSS Отступ внутри
padding: 70px
.
Попробуйте сами »
CSS overflow
CSS свойство padding
используются для создания пространства вокруг
содержимого элемента внутри определенных границ.
С помощью CSS у вас есть полный контроль над отступами. Есть свойства
для установки отступа для каждой стороны элемента по часовой стрелке: top
сверху,
right
справа, bottom
сверху и left
слева.
Отступы - все стороны
CSS имеет свойства для указания заполнения для каждого сторона элемента:
padding-top
отступ сверхуpadding-right
отступ справаpadding-bottom
отступ снизуpadding-left
отступ слева
Все свойства padding
могут иметь следующие значения:
- размер - задает отступ в px, pt, cm, и т.д.
- % - устанавливает отступы в процентах от ширины содержащего элемента
- inherit - задает, что отступ должен быть унаследован от родительского элемента
Внимание: Отрицательные значения не допускаются.
В следующем примере задаются различные отступы для всех четырех сторон элемента <div>
Пример
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Попробуйте сами »
Отступ - сокращенное свойство
Чтобы сократить код, можно указать все свойства отступов в одном свойстве.
Свойство padding
является сокращенным свойством для следующих свойств отступа:
padding-top
padding-right
padding-bottom
padding-left
Итак, вот как это работает:
Если, свойство padding
имеет четыре значения:
- padding: 25px 50px 75px 100px;
- Отступ сверху 25px
- Отступ справа 50px
- Отступ снизу 75px
- Отступ слева 100px
Если, свойство padding
имеет три значения:
- padding: 25px 50px 75px;
- Отступ сверху 25px
- Отступы справа и слева 50px
- Отступ снизу 75px
Если, свойство padding
имеет два значения:
- padding: 25px 50px;
- Отступы сверху и снизу 25px
- Отступы справа и слева 50px
Если, свойство padding
имеет одно значение:
- padding: 25px;
- Все отступы 25px
Отступ и ширина
CSS свойство width
определяет ширину области содержимого элемента.
Область содержимого, это часть находится внутри элементов padding
,
border
и margin
(Бокс Модель).
Таким образом, если элемент имеет заданную ширину, отступ будет добавляться к общей ширине элемента. Это нежелательный результат.
В следующем примере элементу <div>
присваивается ширина 300px
.
Однако фактическая отображаемая ширина элемента <div>
будет равна
350px (300px + 25px
левого отступа + 25px
правой отступа):
Для того чтобы ширина была 300 пикселей, независимо от количества отступов,
вы можете использовать свойство box-sizing
.
Этот элемент заставляет сохранять свою ширину; если
вы увеличиваете отступ, доступное пространство содержимого будет уменьшаться. Вот
пример:
Еще примеры
Установить отступ слева
В этом примере показано, как задать отступ слева для элемента <p>
.
Установить отступ справа
В этом примере показано, как задать отступ справа для элемента <p>
.
Установить отступ сверху
В этом примере показано, как задать отступ сверху для элемента <p>
.
Установить отступ снизу
В этом примере показано, как задать отступ снизу для элемента <p>
.
CSS Упражнения
Все CSS свойства отступов
Свойство | Описание |
---|---|
padding | Сокращенное свойство для установки всех свойств отступа в одном объявлении |
padding-bottom | Устанавливает нижний отступ элемента |
padding-left | Устанавливает левый отступ элемента |
padding-right | Устанавливает правый отступ элемента |
padding-top | Устанавливает верхний отступ элемента |