CSS - margin-top Property
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>
To Continue Learning Please Login
Login with Google