Свойство 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>
Содержимое блока