CSS Margin

CSS margin property is used to space around an HTML element.

CSS Margin Properties

Property	Description
margin	It is used to set the all properties in one declaration.
margin-left	It set the left margin of an element.
margin-right	It set the right margin of an element.
margin-top	It set the top margin of an element.
margin-bottom	It set the bottom margin of an element.

CSS Margin Values

These are some values for margin property.

Value	Description
auto	It is used to let the browser calculate a margin.
length	It specify the margin pt, px, cm, etc. its default value is 0px.
%	It define the margin in percent of the width of containing element.
inherit	Inherit margin from parent element.

Example 1

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: khaki;
}
p.mar {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="mar">This paragraph is displayed with specified margin.</p>
</body>
</html>

Test it Now

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

Next TopicCSS Padding

← prev next →

CSS Tutorials

CSS Properties

CSS Margin

CSS Margin Properties

CSS Margin Values

Example 1