padding-right
Quick Summary for padding-right
The <strong><code>padding-right</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property sets the width of the <a href="/en-US/docs/Web/CSS/CSSBoxModel/IntroductiontotheCSSboxmodel#paddingarea">padding area</a> on the right of an element.
Code Usage for padding-right
<pre class="brush: css notranslate"><code><span class="token comment">/ <length> values /</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 2cm<span class="token punctuation">;</span> <span class="token comment">/ <percentage> value /</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for padding-right
padding-right
The padding-right CSS property sets the width of the padding area on the right of an element.
An element's padding area is the space between its content and its border.
Note: The padding property can be used to set paddings on all four sides of an element with a single declaration.
Syntax
/* <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: revert; padding-right: unset; The padding-right property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.
Values
<length> The size of the padding as a fixed value. Must be nonnegative.
<percentage> The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.
Formal definition
| Initial value | 0 |
|---|---|
| Applies to | all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |
Formal syntax
<length> | <percentage>
Examples
Setting right padding using pixels and percentages
.content { padding-right: 5%; } .sidebox { padding-right: 10px; } Specifications
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
See also
Introduction to the CSS basic box modelpadding-top, padding-bottom, padding-left and the padding shorthand The mapped logical properties: padding-block-start, padding-block-end, padding-inline-start, and padding-inline-end and the shorthands padding-block and padding-inline Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)DeutschFrançais日本語한국어Русский中文 (简体) Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
