margin-top Archives - Lena Design

The CSS margin-top property settles the top margin of an element.

Demo:

Click the “Try it” button to change the top margin of the paragraph (50px):

This is a paragraph.

Syntax:

margin-top: auto|length;

auto – the browser calculates a top margin.

length – defines a fixed top margin in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  margin-top: -15px;
}
.ex2 {
  margin-top: 25px;
}
</style>
</head>
<body>

<p>This is a praragraph.</p>
<p class="ex1">This a paragraph with a -15px top margin.</p>
<p>This is a paragraph.</p>
<p class="ex2">This a paragraph with a 25px top margin.</p>
<p>This is a praragraph.</p>

</body>
</html>

Output:

This is a praragraph.

This a paragraph with a -15px top margin.

This is a paragraph.

This a paragraph with a 25px top margin.

This is a praragraph.

Enjoy coding!