CSS

CSS Margin Top Example

In this example, we will have a look at the margin property of css. More specifically, we will see the usage and applications of margin-top.

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

It is supported by all modern browsers and cen be applied by using the margin: value; notation or margin-top/bottom/right/left: value;.

You have probably used it when working on a web project (front-end) to accommodate elements better and make them look comfortable.

Below, lets see how you can apply this property and a few examples.
 

1. Basic Setup

Go ahead and create a new html document and add the basic sytnax in it like so:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Text Decoration Example</title>
</head>
<body>

<!-- STYLE SECTION -->

<style type="text/css">

</style>

<!-- HTML SECTION -->

</body>
</html>

2. Basic Application & Examples

Below, you can see some cases and examples of the usage of margin top property.

2.1 Basic Application

The most basic application of the margin property would be to give an element (like text) a value for the margin property:

<!-- HTML SECTION  -->

<h3>This is the basic application.</h3>
<!-- STYLE  SECTION -->

<style type="text/css">
h3 {
	margin-top: 50px;	/* 50px space from the top */
}
</style>

The result would be:

Margin-Top Basic Application
Margin-Top Basic Application

But you can even force a margin of 0px, meaning any default margin of that element will be gone. Taking into consideration

the example above we just did, change only in your css tthe margin-top from 50px to 0px to see the expected result:

<!-- STYLE  SECTION -->

<style type="text/css">
h3 {
	margin-top: 0px;	/* 0px space from the top */
}
</style>

See how it removed the h3 tag default margin by setting it to 0px:

Top-Margin of 0px
Top-Margin of 0px

2.2 Image Example

Another example would be when there are also other elements around our element. Look at the code below:

<h2>Heading Here</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br>
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <br>
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <br>
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <br>
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<img src="image.jpg">
img {
	margin-top: 28px;
}

You can now see that the image is 28px below the text above it (in general, the previous element):

Applying Margin-Top in relation to other Elements
Applying Margin-Top in relation to other Elements

The light orange rectangle indicates the space where margin has been applied (assuming there is no padding).

– Table Example

2.3 Table Example

Notice that because you apply margin it means you do not refer to internal spaces (like padding) but to outer space

of the element. Below you can see a simple html of two tables given margin top property to the table element.

<table>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<tr>
	<td>Fabio</td>
	<td>Cimo</td>
	<td>21</td>
</tr>
	<tr>
	<td>Martin</td>
	<td>Brown</td>
	<td>29</td>
</tr>
	<tr>
	<td>Alex</td>
	<td>Mica</td>
	<td>32</td>
</tr>
</table>

<table>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<tr>
	<td>Fabio</td>
	<td>Cimo</td>
	<td>21</td>
</tr>
	<tr>
	<td>Jorgos</td>
	<td>Brandon</td>
	<td>41</td>
</tr>
	<tr>
	<td>Fabio</td>
	<td>Cimo</td>
	<td>21</td>
</tr>
</table>

– CSS

table {
	border: 1px solid #ccc;
	margin-top: 5em;
}

th {
	padding-right: 2em;
}

The tables will now have some space in top of them:

Margin-Top Tables Example
Margin-Top Tables Example

3. Conclusion

To conclude, margin top is a property of css that is pretty straight-forward and requires no big knowledge of css to apply on your various elements to fit them right into the page.Feel free to play around and see how you can use it in other ways.

4. Download

You can download the full source code of this example here: CSS Margin Top

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button