CSS: padding-right property
This CSS tutorial explains how to use the CSS property called padding-right with syntax and examples.
Description
The CSS padding-right property defines the padding space on the right side of an element.
Syntax
The syntax for the padding-right CSS property is:
padding-right: value;
Parameters or Arguments
- value
The padding space to apply to the right side of the element. It can be one of the following:
Value Description fixed Fixed value expressed in px, em, ...
div { padding-right: 5px; }
div { padding-right: 10em; }percentage Percentage value
div { padding-right: 5%; }inherit Element will inherit the padding-right from its parent element
div { padding-right: inherit; }
Note
- The value in the CSS padding-right property can be expressed as either a fixed value or as a percentage.
- Negative values are not allowed in the CSS padding-right property.
- When the value is provided as a percentage, it is relative to the width of the containing block.
- See also padding, padding-top, padding-bottom, and padding-left.
Browser Compatibility
The CSS padding-right property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the padding-right property below, exploring examples of how to use this property in CSS with a fixed value as well as a percentage value.
Using Fixed Value
Let's look at a CSS padding-right example where we have provided the value as a fixed value.
div { padding-right: 9px; }
In this CSS padding-right example, we have provided a value of 9px which would apply to the right side of the element.
Let's look at another CSS padding-right example with a fixed value.
div { padding-right: 3em; }
In this CSS padding-right example, we have provided a value of 3em which would apply to the right side of the element.
Using Percentage
Let's look at a CSS padding-right example where we have provided the value as a percentage.
div { padding-right: 3%; }
In this CSS padding-right example, we have provided a value of 3% which would apply to the right side of the element.
Advertisements