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
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 2nd January 2024