CSS margin Property

Description

The CSS margin property is used to control the spacing around an HTML element. It defines the amount of space between the element's border and adjacent elements or the container it's within. Margins can be set for individual sides (top, right, bottom, left) or as a shorthand property to specify them all at once. Positive values create space, pushing elements apart, while negative values can be used to bring elements closer together. Margins are crucial for achieving proper layout and spacing in web design, helping to create visually appealing and well-organized web pages. Individual 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

Computed value

See individual properties

Animatable

Yes

JavaScript syntax

object.style.margin

Interactive Demo

margin: 25px;

margin: 5% 0;

margin: 5px 50px 20px;

margin: 20px 40px 0 30px;

margin: 0;

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;
}

Browser Support

The following table will show you the current browser support for the CSS margin property.

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 2nd January 2024