This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



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.