CSS margin-top

The CSS margin-top property is used to create top margin around specified element, or around the border of specified element (if element has a border). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-top: 120px;}
   </style>
</head>
<body>
   
   <div>This DIV has a top margin of 120px</div>
   
</body>
</html>

Output

This DIV has a top margin of 120px

CSS margin-top Syntax

The syntax of margin-top property in CSS, is:

margin-top: x;

The value of x should be any of the following:

auto - used to allow browser to create top margin. The default value is 0.
length - used to create custom sized top margin.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - To learn about margin in detail, refer to its separate tutorial.

CSS margin-top Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b{border: 2px solid blue;}
      .b{margin-top: 80px; padding: 12px;}
   </style>
</head>
<body>
   
   <div class="a">
      <div class="b">This DIV has a top margin of 80px</div>
   </div>
   
</body>
</html>

Output

This DIV has a top margin of 80px

CSS Online Test

« Previous Tutorial Next Tutorial »