CSS right property
Definition and Usage
The right property specifies the right edge of the element. This property defines the offset between the right outer margin boundary of the positioned element and the right boundary of the containing block.
Note:If the value of the "position" property is "static", setting the "right" property will have no effect.
Description
For static elements, it is auto; for length values, it is the corresponding absolute length; for percentage values, it is the specified value; otherwise, it is auto.
For relatively defined elements, the calculated value of left is always equal to right.
See Also:
CSS Tutorial:CSS Positioning
HTML DOM Reference Manual:right property
Example
Set the right edge of the image 5 pixels to the left of the right edge of the containing element:
img { position:absolute; right:5px; }
CSS Syntax
right: auto|length|initial|inherit;
Property Value
Value | Description |
---|---|
auto | Default Value. The position of the right edge is calculated by the browser. |
% | Sets the right position of the element as a percentage of the width of the containing element. Negative values can be used. |
length | Sets the right position of the element using units such as px, cm, etc. Negative values can be used. |
inherit | Specifies that the value of the right property should be inherited from the parent element. |
Technical Details
Default Value: | auto |
---|---|
Inheritance: | no |
Version: | CSS2 |
JavaScript Syntax: | object.style.right="50px" |
More Examples
- Set the right edge of an image using fixed values
- This example demonstrates how to set the right edge of an image using fixed values.
- Set the right edge of an image using percentage
- This example demonstrates how to set the right edge of an image using percentage values.
Browser Support
The numbers in the table indicate the first browser version that fully supports this attribute.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.5 | 1.0 | 1.0 | 5.0 |