CSS margin Property

Description

The margin property is shorthand to allow you to set all four margins of an element at once. Its equivalent longhand properties are margin-top, margin-right, margin-bottom and margin-left. Negative values are also allowed.

Initial value

See individual properties

Applies to

All elements

Inherited

No

Media

Visual

Computed value

See individual properties

Animatable

Yes

CSS Version

CSS1, CSS2, CSS3

JavaScript syntax

object.style.margin

Syntax

margin: [ <length> | <percentage> | auto ]{1,4} 

Values

• <length>Specifies a fixed width. Negative Values are allowed.
• <percentage>A percentage relative to the width of the containing block. Negative values are allowed.
• autoauto is replaced by some suitable value, e.g. it can be used for centering of blocks.
  
  Can have between 1 to 4 values:
  1 value, all 4 sides have the same margin.
  2 values, the top and bottom margins are set to the first value and the right and left margins are set to the second.
  3 values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
  4 values, they apply to the top, right, bottom, and left, respectively.

Example

<div class="parent"> 

   <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 

</div>

.parent { 
   background: #e2edc1;
   padding: 10px;
} 
.child { 
   border: 3px solid #333391; 
   padding: 10px;
   margin: 20px;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
3	12	1	1	3.5	1
Tablets / Mobile
1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 3rd November 2019