CSS padding-right Property

Description

The padding-right CSS property is used to define the amount of space added to the right side of an element's content area within its containing box. It effectively increases the distance between the element's content and its right boundary, providing a buffer or spacing. This property is valuable for controlling the layout and spacing of elements on a web page, ensuring proper alignment and aesthetics in web design. It can be specified in various units such as pixels, percentages, or ems, offering flexibility in adjusting the padding to suit the design requirements.

Initial value: 0
Applies to: All elements
Inherited: No
Computed value: <length> - the percentage as specified or the absolute length
Animatable: Yes
JavaScript syntax: object.style.paddingRight

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

padding-right: [ <length> | <percentage> ]

Values

<length>Specifies a positive fixed width.
<percentage>A percentage with respect to the width of the containing block.
inherit

Example

HTML

<div class="layer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

CSS

.layer { 
   background: #fc3;
   border: 5px solid #000;
   padding: 5px;
   padding-right: 40px;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS padding-right property.

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	14	1	1	37

Last updated by CSSPortal on: 2nd January 2024

Support Us