Margin-top

CSS margin-top property is used to define how much top margin will be given for an element. We can also give negative values.

This property has no effect on inline elements, like <span>.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <style>
           .margin-top { margin-top: 100px;}
      </style>
   </head>
   <body>

        <p> Here we didn't set any margin.</p>
        <p class="margin-top"> You can see that we defined a 100px margin top for this text.</p>

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
length It sets the top margin in px, pt, cm, etc. Its default value is 0px.
% It sets top margin in percent of the width of the containing element.
auto When we choose auto value, the browser sets the top margin.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.