CSS margin-right

Try it

The CSS margin-right property is used for specifying the thickness of the right hand margin.

The margin-right property accepts length and percentage values, as well as the auto keyword. Any length and percentage value can be negative.

The margin area sits outside the border area (which sits outside the padding area).

Also see the margin, margin-top, margin-left and margin-bottom properties.

Syntax

Possible Values

length
Specifies the margin thickness as a length (for example 10px).
percentage

Specifies the margin thickness as a percentage of the width of the generated box's containing block (for example 10%).

auto

On the A edge and C edge, the used value is 0. On the B edge and D edge, the used value depends on the available space after calculations have been made for the widths, heights, and margins.

More about the box edges below.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

About A edge, B edge, C edge, and D edge

In CSS A edge, B edge, C edge, and D edge distinguish the four edges of a box. Which side of the box depends on the writing-mode and direction properties of the box's containing block, and map to the four sides as follows:

writing-mode of the containing block direction of the containing block A edge B edge C edge D edge
horizontal-tb ltr top right bottom left
rtl top left bottom right
vertical-rl, sideways-rl ltr right bottom left top
rtl right top left bottom
vertical-lr, sideways-lr rtl left bottom right top
ltr left top right bottom

When you use the auto keyword to set the margin, it takes this information into account.

General Information

Initial Value
0
Applies To
All elements except elements with table display types other than table-caption, table and inline-table
Inherited?
No
Media
Visual
Animatable
Yes (see example)

Example Code

Official Specifications