Easy Tutorial
❮ Met Html Focus Prop Html Dir ❯

marginTop Property


Definition and Usage

The marginTop property sets or returns the top margin of an element.

Syntax

Set marginTop property:

Return marginTop property:

Value Description
% Defines a percentage top margin based on the width of the parent element.
length Defines the width of the top margin using units like px, cm, etc.
auto The browser sets the top margin.
inherit The top margin is inherited from the parent element.

Browser Support

All major browsers support the marginTop property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to support "inherit". IE9 supports "inherit".


Tips and Notes

Both the margin and padding properties insert space around an element. However, the difference is that margin inserts space outside the border, while padding inserts space inside the border.


Example

Change the top margin of a div element:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<style type="text/css">
div{
    border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
    document.getElementById("ex1").style.marginTop="100px";
}
function changePadding(){
    document.getElementById("ex2").style.paddingTop="100px";
}
</script>
</head>
<body>

<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Modify the top margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Modify the top padding of the div element</button>

</body>
</html>

❮ Met Html Focus Prop Html Dir ❯