right - HTML CSS CSS Property

HTML CSS examples for CSS Property:right

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. right

Description

The right CSS property sets offset for the element right edge, relative to the right edge of the element's box or browser window.

For absolutely positioned elements, the right property sets the offset of the right edge of the element's box to the left of the right edge of its containing block.

For relatively positioned elements, the right property sets the offset to the right edge of the box itself.

The following table summarizes the right Property.

Item Value
Default value: auto
Applies to:Positioned elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


right:      length | percentage | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the offset as a length value in px, pt, cm, em, etc. Negative length values are allowed.
percentage Set the offset in percentage which is calculated against the width of the element's containing block. Negative percentage values are allowed.
auto The browser calculates the right edge position. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element right property.

The example below shows the right property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS right property</title>
  <style type="text/css">
    p {<!--from w  ww. j a va2  s  .c o m-->
    width: 200px;
        position: absolute;
        right: 150px;
        padding: 20px;
        text-align: right;
        font: bold 18px sans-serif;
        background: #9acd32;
    }
</style>
 </head>
 <body>
  <p>Play with the right property value to see how it works.</p>
 </body>
</html>

Related Tutorials