Свойство padding
Свойство padding устанавливает внутренний
отступ элемента. Значением свойства служат
любые единицы
для размеров. По умолчанию каждый браузер
может добавлять элементам различные отступы.
Свойство является сокращением для свойств
padding-top,
padding-right,
padding-bottom,
padding-left.
Синтаксис
селектор {
padding: значение;
}
Количество параметров
Свойство padding принимает 1,
2, 3 или 4 значения,
перечисляемые через пробел:
| Количество | Описание |
|---|---|
1 |
Одно значение задает отступ со всех сторон элемента. |
2 |
Первое значение задает отступ сверху и снизу, а второе - справа и слева. |
3 |
Первое значение задает отступ сверху, второе - справа и слева, а третье - снизу. |
4 |
Первое значение задает отступ сверху, второе - справа, третье - снизу, а четвертое - слева. |
Пример
В данном случае по умолчанию внутренний отступ будет нулевой и текст будет прижат к границе блока:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Пример
А теперь давайте сделаем внутренний отступ
в 30px:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Пример
Сейчас отступ сверху и снизу будет 20px,
а справа и слева - 5px:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Пример
Сейчас отступ сверху 5px, справа -
15px, снизу - 25px, слева -
35px:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Смотрите также
-
свойство
margin,
которое задает внешний отступ