Top Margin

The CSS margin properties define the space around elements. CSS padding properties refer to the white space within the border or we can say that it’s internal spacing. Setting the value of a margin is NOT the same as setting the padding value, and you should always remember that padding & marginare two different properties.

All four sides (top, bottom, right, left) can be changed independently using separate properties. It is also possible to use negative values to overlap content.

Usage:

margin-top: 10px;
margin-top: 10pt;
margin-top: 10%;
margin-top: auto;

Many a times we would need to set margin for our objects. This will set the top margin of the object.

It takes the following values.

pt: You can set values in points. (e.g: 10pt or 100pt).
px: You can set values in pixels. (e.g: 10px or 100px).
%: You can set values in percentage. (e.g: 10% or 100%).
auto: This will set a automatic margin.

The following CSS code example shows how to set the value of the top margin:

<html>
<head>
<style type=”text/css”>
.topmargin
{
margin-top: 5cm
}
</style>
</head>

<body>
<p>
This paragraph does not have a specified margin.
</p>
<div class=”topmargin”>
This paragraph has a top margin of 5cm.
</p>
</body>

</html>