CSS margin-top Property

Description

The margin-top CSS property is used to control the amount of space, or margin, between the top edge of an element and its adjacent elements. It allows web developers to create spacing above an element, pushing it away from the elements above it. By specifying a numerical value (in pixels, percentages, or other supported units) for margin-top, you can adjust the vertical positioning of an element within its container, influencing the layout and spacing of web page components. This property is part of the broader set of margin properties in CSS, which collectively enable precise control over the spacing between elements in a webpage's layout.

Initial value
0
Applies to
All elements
Inherited
No
Computed value
As specified, but with relative lengths converted into absolute pixel values.
Animatable
Yes
JavaScript syntax
object.style.marginTop

Interactive Demo

Margin Top Example

Syntax

margin-top: <length> | <percentage> | auto

Values

  • <length>Specifies a fixed length, using any standard CSS length units. Negative Values are allowed.
  • <percentage>A percentage always relative to the width of the containing block.
  • inherit

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: 10px;
   margin-top: 40px;
}

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 2nd January 2024