Files
freeCodeCamp/guide/russian/css/padding/index.md
Adeksi 405909d510 Add image (#24690)
Add link to information on russian
Change image link
2018-11-05 21:33:21 +04:00

59 lines
3.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Padding
localeTitle: Отступ
---
# Отступ
Свойство `padding` CSS задает область заполнения на всех четырех сторонах элемента. Это свойство может использоваться для создания пространства вокруг контента (внутри границы). Это краткое описание, чтобы установить все отдельные paddings сразу: `padding-top` , `padding-right` , `padding-bottom` и `padding-left` . Значения определяются по часовой стрелке.
Значения заполнения задаются с использованием длин или процентов или `inherit` ключевое слово и не могут принимать отрицательные значения. Начальная, или по умолчанию, значение для всех свойств заполнения 0. В то время как вы можете использовать `inherit` ключевое слово , но оно не может быть использовано вместе со значением длины.
## Синтаксис
```css
.element {
padding: [padding-top] || [padding-right] || [padding-bottom] || [padding-left];
}
```
Это свойство может быть указано с использованием одного, двух, трех или четырех значений.
* Когда задано одно значение, он применяет одинаковое дополнение ко всем четырем сторонам.
* Когда указаны два значения, первое дополнение применяется к верхнему и нижнему, второе - к левому и правому.
* Когда указаны три значения, первое дополнение применяется к верхней части, вторая - к левой и правой, третья - к нижней.
* Когда указаны четыре значения, прокладки применяются к верхнему, правому, нижнему и левому в этом порядке (по часовой стрелке).
```css
/* em refers to the current font size of an element */
/* Apply to all four sides */
padding: 1em;
/* top and bottom | left and right */
padding: 5% 10%;
/* top | left and right | bottom */
padding: 1em 2em 2em;
/* top | right | bottom | left */
padding: 5px 1em 0 1em;
```
## Где в коробке
Свойство прокладки в CSS определяет самую внутреннюю часть модели окна, создавая пространство вокруг содержимого элемента внутри любых определенных полей и / или границ.
* ![Модель CSS Box](http://htmlbook.ru/files/images/css/css_padding_1.png)
## Поддержка браузера
Он эффективно поддерживается во всех браузерах (с IE6 +, Firefox 2+, Chrome 1+ и т. Д.),
### Больше информации
* [Рабочий проект W3C](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 Уровень 1](https://www.w3.org/TR/CSS1/#padding)
* [Веб-документы MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
* [Трюки CSS](https://css-tricks.com/almanac/properties/p/padding/)
* [CSS на русском языке](http://htmlbook.ru/css/padding)