Margin

CSS margin property is a shorthand property which we can place all the margin properties (CSS margin-bottom property , CSS margin-left property , CSS margin-right property , CSS margin-top property ) at once.

We can also give negative values.

We must set the properties with this order: 1- margin-top , 2- margin-right , 3- margin-bottom , 4- margin-left.

CSS Syntax

margin: length | auto | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
<head>
<style>
.margin-example {
    margin: 20px 15px 40px 80px;;
}

</style>
</head>
<body>

<p>We didn't use any margin space here.</p>
<p class="margin-example">But we set margins for this text.</p>
<p>We didn't use any margin space here.</p>

</body>
</html>

Here the result is:



Property Values

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




Related articles