Online Web Development Tutorials

The padding area is the space between the content of the element and its border.It allow you to set the padding area for an element that separates its border from its content.

There are following CSS Padding properties:

CSS Padding Properties

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

CSS Margin Properties

Value	Description
length	It is used to define fixed padding in pt, px, em etc.
%	It defines padding in % of containing element.

See this example:

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