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