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