CSS padding-right Property

The padding-right property defines the amount of inner space between an element's content and its right border.

selector { padding-right: value; }

<length>	Specifies a fixed distance using units like px, em, or rem.
<percentage>	Specifies the padding as a percentage of the width of the containing block.

Code Examples

A basic example showing how padding-right creates internal space between the content and the right edge.

<div style="background-color: #eeeeee; border: 1px solid #333333; padding-right: 50px;">The content in this box is pushed 50 pixels away from the right border.</div>

An advanced example using JavaScript to dynamically adjust the right padding of a container when a user interacts with it.

<div id="info-box" style="width: 300px; background-color: #f9f9f9; border: 2px solid #000000; box-sizing: border-box; padding: 10px;">
  <p>Standard Padding</p>
  <button onclick="expandRightSpace()">Increase Right Padding</button>
</div>

<script>
function expandRightSpace() {
  const el = document.getElementById("info-box");
  el.style.paddingRight = "80px";
  el.style.backgroundColor = "#e0f7fa";
  console.log("The padding-right is now: " + el.style.paddingRight);
}
</script>

Pro Tip

If you are setting all four sides of padding, use the "padding" shorthand property to keep your CSS clean. If you only need to clear space on the right, "padding-right" is the specific tool for the job and keeps your intent clear to other developers.

Deep Dive

Think of padding-right like the passenger-side shoulder room in a car; it creates a buffer that keeps the passenger away from the door. In the standard CSS box model, adding padding increases the total width of the element. For example, a 100px wide box with 20px of padding-right actually occupies 120px of horizontal space. To prevent this expansion and keep the box at its defined width, you must use the "box-sizing: border-box" property. Unlike margins, padding values cannot be negative.

Best Practices

Always pair your padding with "box-sizing: border-box" to ensure the padding is swallowed into the width of the element rather than expanding it. Use relative units like "em" or "rem" for padding so the internal spacing scales naturally if the user changes their font size, maintaining the visual rhythm of your design.

Common Pitfalls

A frequent mistake is forgetting that percentages for padding-right are calculated based on the width of the parent container, not the element itself. Also, many developers get frustrated when their layout breaks after adding padding; this usually happens because they haven't set "box-sizing: border-box", causing the element to grow wider than its container.

Accessibility

Providing adequate right padding ensures that text does not butt up against borders or adjacent images, which significantly improves readability for users with visual impairments. However, be careful on small mobile screens; too much padding-right can squeeze the content area into a tiny vertical sliver, making the site unusable.

Dev Data Table: padding-right property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1996
js_syntax_1	element.style.paddingRight = "20px";
js_syntax_2	element.style.setProperty("padding-right", "20px");
js_note	When targeting this property in JavaScript via the style object, use the camelCase version "paddingRight".
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }