/    /  CSS Margin

CSS Margin

 

CSS Margin property is used to define the space around elements and it is completely transparent.

 

CSS Margin Properties:

 

margin: Set all the properties in one declaration.

margin-left:Left margin of an element.

margin-right: Right margin of an element.

margin-top: Top margin of an element.

margin-bottom: Bottom margin of an element.

 

CSS Margin Values:

 

auto: Browser calculate a margin.

length: Margin pt, px, cm, etc. its default value is 0px.

%: Percent of the width of containing element.

inherit: Margin from parent element.

 

Example:

 

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { 
   background-color: #66ffff;
   font-size:20px; 
} 
p.ex { 
  margin-top: 50px; 
  margin-bottom: 50px; 
  margin-right: 100px; 
  margin-left: 100px; 
} 
</style> 
</head> 
<body> 
<p>Not displayed with specified margin. </p> 
<p class="ex">Displayed with specified margin.</p> 
</body> 
</html>

 

OUTPUT:

 

CSS Margin

 

Four types of margin property:

 

  1. margin: 50px 100px 150px 200px;
  2. margin: 50px 100px 150px;
  3. margin: 50px 100px;
  4. margin 50px;