Online Web Development Tutorials

The CSS margin properties allow you to set the margins around the sides of an element's box.You can easily specify the different margins for the different sides of an element such as top, right, bottom or left side using the CSS individual margin property.

There are following CSS margin properties:

CSS Margin Properties

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

CSS Margin Properties

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

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Margin</title>
<style>  
	p.margin {  
	    margin-top:35px;   
	    margin-right:10px;   
	    margin-bottom:75px;   
	    margin-left:55px;    
	}  	
</style> 
</head>
<body>  
		<h1>This is heading.</h1>  
	    <p class="margin">This is a paragraph</p>   
	    <p>This is another paragraph</p>   
 </body>
</html>

Margin: Shorthand Property

The margin property is a shorthand property to avoid setting margin of each side separately: margin-top, margin-right, margin-bottom and margin-left.

There are four types to specify the margin property.

margin: 40px 80px 140px 180px;
margin: 40px 80px 140px;
margin: 40px 80px;
margin 40px;

margin: 40px 80px 140px 180px;

top margin value is 40px
right margin value is 80px
bottom margin value is 140px
left margin value is 180px

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Margin</title>
<style>  
	p.margin {  
	    margin: 40px 80px 140px 180px;     
	}  	
</style> 
</head>
<body>  
		<h1>This is heading.</h1>  
	    <p class="margin">This is a paragraph</p>   
	    <p>This is another paragraph</p>   
 </body>
</html>

margin: 40px 80px 140px;

top margin value is 40px
left and right margin value is 80px
bottom margin value is 140px

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Margin</title>
<style>  
	p.margin {  
	    margin: 40px 80px 140px;     
	}  	
</style> 
</head>
<body>  
		<h1>This is heading.</h1>  
	    <p class="margin">This is a paragraph</p>   
	    <p>This is another paragraph</p>   
 </body>
</html>

margin: 40px 80px;

top and bottom margin value is 40px
left and right margin value is 80px

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Margin</title>
<style>  
	p.margin {  
	    margin: 40px 80px;     
	}  	
</style> 
</head>
<body>  
		<h1>This is heading.</h1>  
	    <p class="margin">This is a paragraph</p>   
	    <p>This is another paragraph</p>   
 </body>
</html>

margin: 40px;

top, bottom, left and right margin value is 40px

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Margin</title>
<style>  
	p.margin {  
	    margin: 40px;     
	}  	
</style> 
</head>
<body>  
		<h1>This is heading.</h1>  
	    <p class="margin">This is a paragraph</p>   
	    <p>This is another paragraph</p>   
 </body>
</html>