CSS margin

<!doctype html>
<title>Example</title>
<style>
  div { 
    background: gold; 
    padding: 20px; 
  }
  p {
    text-align: justify;
    margin: 0 20vw;
    font-size: 4vw;
  }
</style>
<div>
<p>This text has had its margin set to <code>0 20vw</code>, which means <code>0</code> for the top and bottom, and <code>20vw</code> for the left and right.</p>
</div>

The CSS margin property is shorthand for specifying margin width on all sides of an element.

It is classed as a "shorthand property" because it sets the margin-top, margin-right, margin-bottom and margin-left properties all in one place. In other words, you can use the margin property to set all four sides instead of using four separate properties.

You can provide the margin property with one value to set the margin on all four sides, or you can provide multiple values to set different values for each side of the box. Here's how that works:

One value sets all four sides.
Two values: The first value sets the top and bottom margins, the second value sets the left and right margins.
Three values: The first value sets the top, the second value sets the left and right, and the third value sets the bottom.
Four values: They set the top, right, bottom and left margins in that order.

Examples

Syntax

This means that you can provide either a length value, a percentage value, or the auto keyword anywhere between one and four times inclusive. These values set the margin on each side as outlined above.

Possible Values

Here's an explanation of the accepted 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
`horizontal-tb`	`rtl`	top	left	bottom	right
`vertical-rl`, `sideways-rl`	`ltr`	right	bottom	left	top
`vertical-rl`, `sideways-rl`	`rtl`	right	top	left	bottom
`vertical-lr`, `sideways-lr`	`rtl`	left	bottom	right	top
`vertical-lr`, `sideways-lr`	`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)

Official Specifications

CSS basic box model (Editor's Draft, 7 September 2016)
CSS basic box model (W3C Working Draft 9 August 2007)
CSS Writing Modes Level 3 (W3C Candidate Recommendation, 15 December 2015)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)

Web.QHMIT.com