CSS - margin-top Property

Quiz

CSS margin-top property sets the width of the margin on the top of an element.

Syntax

margin-top: auto | length | percentage | initial | inherit;

Property Values

Value	Description
auto	The browser sets the margin for top edge automatically. Default.
length	The margin space of top edge is set using length units (e.g. px, em, rem etc.). Negative values are allowed.
percentage	The margin space of top edge is set using percentage values (e.g. 10%) relative to the containing element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Margin Top Property

The following examples explain the margin-top property with different values.

Margin Top Property with Auto Value

To allow the browser to automatically calculate the top margin based on the available space, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding: 20px;
      }

      .dimensions {
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .box {
         background-color: lightblue;
         margin-top: auto;
      }

      .sample-box {
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-top property
   </h2>
   <h4>
      margin-top: auto;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box dimensions">
         This box has margin-top: auto
      </div>
      
      <div></div>
   </div>

</body>

</html>

Margin Top Property with Length Values

To set the top margin, we can specify the margin size using length units (e.g. px, em, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding: 20px;
      }

      .dimensions {
         background-color: lightblue;
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .sample-box {
         background-color: lightgreen;
      }

      .box1 {
         margin-top: 40px;
      }

      .box2 {
         margin-top: 5em;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-top property
   </h2>
   <h4>
      margin-top: 40px;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box1 dimensions">
         This box has margin-top: 40px
      </div>  
   </div>
   <h4>
      margin-top: 5em;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box2 dimensions">
         This box has margin-top: 5em
      </div>
   </div>

</body>

</html>

Margin Top Property with Percentage Values

To set the top margin, we can specify the margin size using percentage values(e.g. 10% (of the width of the containing element)). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding: 20px;
      }

      .dimensions {
         background-color: lightblue;
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .sample-box {
         background-color: lightgreen;
      }

      .box1 {
         margin-top: 4%;
      }

      .box2 {
         margin-top: 18%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-top property
   </h2>
   <h4>
      margin-top: 4%;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box1 dimensions">
         This box has margin-top: 4% of container width
      </div> 
   </div>
   <h4>
      margin-top: 18%;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box2 dimensions">
         This box has margin-top: 18% of container width
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
margin-top	1.0	6.0	1.0	1.0	3.5

css_reference.htm

Print Page