56 lines
4.3 KiB
Markdown
56 lines
4.3 KiB
Markdown
---
|
||
title: Padding
|
||
|
||
localeTitle: Внутренний отступ
|
||
---
|
||
|
||
# Внутренний отступ
|
||
Свойство CSS `padding` задаёт внутренние отступы со всех четырёх сторон элемента. Это свойство можно использовать для создания пространства вокруг содержимого (внутри границ). Это сокращённая запись для того, чтобы сразу установить все индивидуальные внутренние отступы: `padding-top`, `padding-right`, `padding-bottom` и `padding-left`. Значения определяются по часовой стрелке. Можно легко запомнить аббревиатуру T - top, R - right, B - bottom, L - left (TRBL), как слово `trouble`.
|
||
|
||
Значения внутреннего отступа устанавливаются с помощью длины или процентов или ключевого слова `inherit` и не могут принимать отрицательные значения. Начальное значение или значение по умолчанию для всех свойств внутреннего отступа равно 0. В то время как вы можете использовать ключевое слово `inherit`, но оно не может быть использовано вместе со значением длины.
|
||
|
||
## Синтаксис
|
||
```css
|
||
.element {
|
||
padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left];
|
||
}
|
||
```
|
||
|
||
Это свойство может быть задано с помощью одного, двух, трех или четырех значений.
|
||
* Когда задано одно значение, применяется один и тот же внутренний отступ ко всем четырем сторонам элемента.
|
||
* При указании двух значений, первый внутренний отступ применяется к верхней и нижней стороне элемента, второй — к левой и правой.
|
||
* Когда заданы три значения, первый внутренний отступ применяется к верхней стороне элемента, второй — к левой и правой, третий — к нижней.
|
||
* При указании четырех значений, внутренний отступ применяется к верхней, правой, нижней и левой стороне элемента в указанном порядке (по часовой стрелке).
|
||
|
||
```css
|
||
/* em ссылается на текущий размер шрифта элемента */
|
||
/* Применяется ко всем четырём сторонам элемента */
|
||
padding: 1em;
|
||
|
||
/* сверху и снизу | слева и справа */
|
||
padding: 5% 10%;
|
||
|
||
/* сверху | слева и справа | снизу */
|
||
padding: 1em 2em 2em;
|
||
|
||
/* сверху | справа | снизу | слева */
|
||
padding: 5px 1em 0 1em;
|
||
```
|
||
|
||
## Где используется в блочной модели документа
|
||
Свойство `padding` в CSS определяет внутреннюю часть блочной модели документа, создавая пространство вокруг содержимого элемента, внутри любых заданных внешних отступов и/или границ.
|
||
|
||
|
||
|
||
|
||
## Поддержка броузерами
|
||
Это отлично поддерживается всеми броузерами (начиная с IE6+, Firefox 2+, Chrome 1+ и т. д.)
|
||
|
||
### Подробная информация
|
||
* [W3C Working Draft](https://www.w3.org/TR/css3-box/#the-padding)
|
||
* [W3C CSS Level 2](https://www.w3.org/TR/CSS2/box.html#propdef-padding)
|
||
* [W3C CSS Level 1](https://www.w3.org/TR/CSS1/#padding)
|
||
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
|
||
* [CSS Tricks](https://css-tricks.com/almanac/properties/p/padding/)
|
||
|