margin - HTML CSS CSS Property

HTML CSS examples for CSS Property:margin

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. margin

Description

The margin CSS property sets the margin on all four sides of the element.

It is a shorthand property for margin-top, margin-right, margin-bottom, and margin-left property.

The following table summarizes the margin Property.

Item Value
Default value: 0
Applies to:All elements except those with table display types other than table-caption, table, and inline-table. It also applies to ::first-letter.
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


margin:      [ length | percentage | auto ] 1 to 4 values | initial | inherit

This shorthand notation can take one, two, three, or four whitespace separated values.

  • If one value is set, this margin sets all 4 sides.
  • If two values are set, the first value sets top and bottom, the second value sets the right and left side.
  • Three values set the top, horizontal (i.e. right and left) and bottom side.
  • Four values set the top, right, bottom, left side in that order.

Property Values

The following table describes the values of this property.

ValueDescription
margin-topSets the top margin of the element.
margin-right Sets the right margin of the element.
margin-bottom Sets the bottom margin of the element.
margin-left Sets the left margin of the element.
initial Sets this property to its default value.
inherit take the value of its parent element margin property.

The example below shows the margin property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS margin Property</title>
  <style type="text/css">
    h1 {<!--   w  ww .  j  av  a 2s. c  o  m-->
        margin: 25px;
    }
    p {
        margin: 50px 100px;
    }
</style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  <p><strong>Note:</strong> Play with the margin property value to see how it works.</p>
 </body>
</html>

Related Tutorials