/    /  CSS right property

CSS right property

 

This CSS property defines an offset for the right edge of the positioned element, relative to the right edge of the reference element’s box or browser window.

Absolutely position: The right property specifies how far the right edge of the element’s box is offset to the left of the right edge of its containing block.

Relatively position: The right property specifies the offset with respect to the right edge of the box itself.

 

Syntax:

 

right:         length | percentage | auto | initial | inherit

 

Property Values:

 

  • auto: The browser to calculate the right edge position.
  • length: The right property in px, cm, pt, etc.
  • percentage: The right property in percentage (%).
  • initial: Property to its default value.
  • inherit: Property from its parent element.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<title>
CSS right Property
</title>
<style>

div{
position: absolute;
width: 200px;
height: 100px;
font-size: 40px;
}
#len {
right: 200px;
border: 5px solid lightgreen;
}
#per {
right: 50%;
border: 5px solid blue;
}

#init {
right: initial;
border: 5px solid yellow;
}

</style>
</head>

<body>
<h1> right Property </h1>

<div id = "len"> right: 200px; </div>
<div id = "per"> right: 50%; </div>
<div id = "init"> right: initial; </div>
</body>
</html>

 

OUTPUT:

 

CSS right property 

 

 Example:

 

<!DOCTYPE html>
<html>
<head>
<title>
CSS right Property
</title>
<style>

div{
position: relative;
width: 250px;
height: 100px;
font-size: 40px;
}
#len {
right: -100px;
border: 5px solid lightgreen;
}
#per {
right: -30%;
border: 5px solid blue;
}
#auto {
right: auto;
border: 5px solid red;
}

#init {
right: initial;
border: 5px solid lightblue;
}

</style>
</head>

<body>
<h3>right Property </h3>

<div id = "len"> right: -100px; </div>
<div id = "per"> right: -30%; </div>
<div id = "auto"> right: auto; </div>
<div id = "init"> right: initial; </div>
</body>
</html>

 

OUTPUT:

 

CSS right property