CSS right Property

The right property specifies a portion of a positioned element's position. For absolute or fixed positioned elements, the right property is used to set the right margin edge of the element as well as the right edge of its containing block.

Syntax

right: auto | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        position: relative;
        width: 300px;
        height: 200px;
        border: 2px solid #00ab55;
    }

    .inner-box {
        position: absolute;
        right: 15px;
        width: 100px;
        height: 100px;
        border: 2px solid #ff4842;
    }
</style>
</head>
<body>

<div class="box">
    <div class="inner-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
auto	Allows the browser to calculate the correct edge position. This is the default setting.
length	Sets the right edge position in pixels, centimetres, and so on. Negative values are permitted. Learn more about length units.
%	Determines the right edge position as a percentage of the containing element. Negative values are permitted.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
right	1.0	1.0	1.0	5.5	5.0

resize

row-gap

CSS right Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us