Свойство padding

Сокращенная запись для определения внутреннего отступа у элемента. Включает в себя свойства padding-top, padding-right, padding-bottom, padding-left.

padding: 15px 20px 15px 20px;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

padding: 0;

Убирает все внутренние отступы у элемента

padding: 10px;

Используя один параметр. Задает внутренний отступ со всех сторон

<style>
.example-1 {
    width: 150px;
    padding: 10px;
    background: #cfe7f3;
}
</style>

<div class="example-1">Содержимое блока</div>
Содержимое блока
padding: 10px 20px;

Используя два параметра. Первый - внутренний отступ сверху и снизу, второй - внутренний отступ слева и справа

<style>
.example-2 {
    width: 150px;
    padding: 10px 20px;
    background: #cfe7f3;
}
</style>

<div class="example-2">Содержимое блока</div>
Содержимое блока
padding: 15px 25px 25px;

Используя три параметра. Первый - внутренний отступ сверху, второй - внутренний отступ справа и слева, третий - внутренний отступ снизу

<style>
.example-3 {
    width: 150px;
    padding: 15px 25px 25px;
    background: #cfe7f3;
}
</style>

<div class="example-3">Содержимое блока</div>
Содержимое блока
padding: 10px 15px 10px 25px;

Используя четыре параметра. Первый - внутренний отступ сверху, второй - внутренний справа, третий - внутренний отступ снизу, четвертый - внутренний отступ слева

<style>
.example-4 {
    width: 150px;
    padding: 10px 15px 10px 25px;
    background: #cfe7f3;
}
</style>

<div class="example-4">Содержимое блока</div>
Содержимое блока

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии