Scholar Repository
Home>Manual>CSS Margin Property

CSS Margin Property

From http://www.w3schools.com (Copyright Refsnes Data)

CSS margin Property


CSS Reference Complete CSS Reference


Definition

The margin property is a shorthand property for setting all of the properties for the four margins in one declaration.

Note: Negative values are allowed.

Inherited: No


JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.margin="100px"

In our HTML DOM tutorial you can find more details about the margin property.

In our HTML DOM tutorial you can also find a full Style Object Reference.


Example

h1 {margin: 10px}
all four margins will be 10px

h1 {margin: 10px 2%}
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.

h1 {margin: 10px 2% -10px}
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px

h1 {margin: 10px 2% -10px auto}
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin  will be -10px, left margin will be set by the browser

Possible Values

Value Description
margin-top
margin-right
margin-bottom
margin-left
Sets the properties for the margins. The values comes in % (defines a margin in % of the total height/width of the document), length (defines a fixed margin), and auto (the browser sets a margin).

Default value: Not defined



Try-It-Yourself Demos

All the margin properties in one declaration
This example demonstrates how to set a shorthand property for setting all of the margin properties in one declaration.


CSS Reference Complete CSS Reference

From http://www.w3schools.com (Copyright Refsnes Data)

Home>Manual>CSS Margin Property