CSS - margin-top Property

Quiz

The margin-top property sets the width of the margin at the top of an element.

A positive value moves it away from neighboring elements, whereas a negative value brings it closer.

Possible Values

The following list covers all the possible values of margin-top property.

<length> - The fixed value of the margin's size.
<percentage> - The percentage of the margin measured in relation to the contained block's inline size, or the writing-mode defined width in a horizontal language.
auto - The browser selects a suitable value to use on its own.

Applies to

All elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.

Syntax

margin-top = <length-percentage> | auto

CSS margin-top - Basic Example

Following example shows the different values that can be passed to the margin-top CSS property:

<html>
<head>
<style>
   p {
      background-color: rgb(201, 238, 240);
      border: 1px solid black;
      width: fit-content;
   }

   .margin-px {
      margin-top: 30px;
   }

   .margin-perc {
      margin-top: 10%;
   }

   .margin-em {
      margin-top: 3em;
   }

   .margin-auto {
      margin-top: auto;
   }

   .margin-neg {
      margin-top: -10px;
   }
</style>
</head>
   
<body>
   <p class="margin-px">
      The top margin is 30px.
   </p>
   
   <p class="margin-perc">
      The top margin is 10%.
   </p>
   
   <p class="margin-em">
      The top margin is 3em.
   </p>
   
   <p class="margin-auto">
      The top margin will be set by the browser.
   </p>
   
   <p class="margin-neg">
      The top margin is -10px.
   </p>
</body>
</html>

inherit - when you want the top margin of a child element to match the top margin of its parent element, use the property inherit.

Note: inherit value can be used only on child elements and not on parent element.

CSS margin-top - Inherit

Here is an example where the margin-top of a child element is inherited from the parent element−

<html>
<head>
<style>
   .p {
      margin-top: 20%;
   }
   
   p.example {
      margin-top: inherit;
      border: 1px solid #4CAF50;
   }
</style>
</head>
<body>
<h3>margin-top property - inherit</h3> 
   <p>The margin-top is 20% for parent element.</p>
   <p class="example">A child element where the top margin is inherited from the parent (p) and is 20%.</p>
</body>
</html>

Print Page