CSS margin-top
The CSS margin-top property is used for specifying the thickness of the top margin.
The margin-top property accepts length and percentage values, as well as the auto keyword. Any length and percentage value can be negative.
The margin area sits outside the border area (which sits outside the padding area).
Also see the margin, margin-bottom, margin-left and margin-right properties.
Syntax
Possible Values
- length
- Specifies the margin thickness as a length (for example
10px). - percentage
-
Specifies the margin thickness as a percentage of the width of the generated box's containing block (for example
10%). auto-
On the A edge and C edge, the used value is
0. On the B edge and D edge, the used value depends on the available space after calculations have been made for the widths, heights, and margins.More about the box edges below.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
initial- Represents the value specified as the property's initial value.
inherit- Represents the computed value of the property on the element's parent.
unset- This value acts as either
inheritorinitial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
About A edge, B edge, C edge, and D edge
In CSS A edge, B edge, C edge, and D edge distinguish the four edges of a box. Which side of the box depends on the writing-mode and direction properties of the box's containing block, and map to the four sides as follows:
writing-mode of the containing block |
direction of the containing block |
A edge | B edge | C edge | D edge |
|---|---|---|---|---|---|
horizontal-tb |
ltr |
top | right | bottom | left |
rtl |
top | left | bottom | right | |
vertical-rl, sideways-rl |
ltr |
right | bottom | left | top |
rtl |
right | top | left | bottom | |
vertical-lr, sideways-lr |
rtl |
left | bottom | right | top |
ltr |
left | top | right | bottom |
When you use the auto keyword to set the margin, it takes this information into account.
General Information
- Initial Value
0- Applies To
- All elements except elements with table display types other than
table-caption,tableandinline-table - Inherited?
- No
- Media
- Visual
- Animatable
- Yes (see example)
Example Code
Official Specifications
- CSS Box Model Module Level 4 (Editor's Draft)
- CSS Box Model Module Level 3 (W3C Working Draft)
- CSS Writing Modes Level 4 (W3C Candidate Recommendation)
- CSS Level 2.1 (W3C Recommendation 07 June 2011)
- CSS Level 1 (W3C Recommendation 17 Dec 1996)
Browser Support
Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.
Initial Value
CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.
Inheritance
Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.
Vendor Prefixes
Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.