padding-right CSS

Свойство padding-right устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле справа от текста
Рис. 1. Поле справа от текста

Свойство **`padding-right`** устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1). ![Рис. 1. Поле справа от текста](/workspace/uploads/css/css_padding-right_1.png)
Значение по умолчанию:

0

Значение по умолчанию:
`0`
Наследуется:
Нет
Применяется:

Ко всем элементам

Применяется:
Ко всем элементам
Анимируется:
Да
Объект JavaScript:

object.style.paddingRight

Объект JavaScript:
`object.style.paddingRight`
Спецификации:
Спецификации:
* [CSS Basic Box Model](http://dev.w3.org/csswg/css3-box/#the-padding) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/box.html#padding-properties) * [CSS Level 1](http://www.w3.org/TR/CSS1/#padding-right)

Синтаксис

/* <length> values */
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/* <percentage> value */
padding-right: 10%;

/* Global values */
padding-right: inherit;
padding-right: initial;
padding-right: unset;

Синтаксис

/* <length> values */ padding-right: 0.5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* Global values */ padding-right: inherit; padding-right: initial; padding-right: unset;

Значения

Величину правого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах.

Значения

Величину правого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding-right</title>
  <style>
   .layer {
    background: #ffe url(/example/image/help.png) no-repeat top right; /* Параметры фона */
    border: 2px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    padding-right: 90px; /* Поле справа */
    text-align: justify; /* Выравнивание по ширине */
    min-height: 126px; /* Минимальная высота */ 
   }
  </style>
 </head>
 <body> 
  <div class="layer">
   Кондуктометрия мягко передает электронный способ 
   получения независимо от последствий проникновения 
   метилкарбиола внутрь.
  </div>
 </body>
</html>

Примеры

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>padding-right</title> <style> .layer { background: #ffe url(/example/image/help.png) no-repeat top right; /* Параметры фона */ border: 2px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ padding-right: 90px; /* Поле справа */ text-align: justify; /* Выравнивание по ширине */ min-height: 126px; /* Минимальная высота */ } </style> </head> <body> <div class="layer"> Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь. </div> </body> </html>

Содержание

  • Синтаксис
      /* <length> values */ padding-right: 0.5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* Global values */ padding-right: inherit; padding-right: initial; padding-right: unset;
  • Значения
    • Примеры
        <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>padding-right</title> <style> .layer { background: #ffe url(/example/image/help.png) no-repeat top right; /* Параметры фона */ border: 2px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ padding-right: 90px; /* Поле справа */ text-align: justify; /* Выравнивание по ширине */ min-height: 126px; /* Минимальная высота */ } </style> </head> <body> <div class="layer"> Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь. </div> </body> </html>

    В начало