#padding_separate{
	background-color:#ababab;	
	/*
	declare each padding side
	by naming the coordinate
		padding-coordinate:value;		
	*/
	padding-top:10px;
	padding-right:30px;
	padding-bottom:0px;
	padding-left:50px;
}
#padding_all_sides{
	background-color:#ababab;
	/*
	declare 
		padding:
	for same value on all four coordinates
	*/
	padding:30px;
}
#inline_padding{
	background-color:lightgrey;
	/*
	inline tags wont recognize 
	increased vertical height,
	so may result in content overlap	
	
	use display:block;	
	for more predictable behavior
	*/
	padding:10px;	
}
#border_separate{
	background-color:#ababab;
	width:400px;
	/*
	declare each border side
	by naming the coordinate
		border-coordinate:value;		
	*/
	
	border-top-width:3px;
	border-top-style:solid;
	border-top-color:darkgreen;

	border-right-width:2px;
	border-right-style:double;
	border-right-color:yellow;	
	
	border-bottom-width:4px;
	border-bottom-style:dashed;
	border-bottom-color:lightgreen;
	
	border-left-width:10px;
	border-left-style:solid;
	border-left-color:yellow;
}
#border_all_sides{
	background-color:#ababab;
	width:400px;
	/*
	declare 
		border:
	for same value on all four coordinates
	*/
	border-style:dotted;
	border-color:black;
	border-width:3px;
}
#inline_border{
	/*
	inline tags wont recognize 
	increased vertical height,
	so may result in content overlap

	use display:block;	
	for more predictable behavior
	*/
	border:solid 10px black;
}


/*
Example 1
	by default, padding and borders are 
	added to the dimensions of the box model
*/
#nopadding_noborder{
	background-color:orange;
	width:100px;
	height:25px;
}		
#nopadding_withborder{
	background-color:orange;
	width:100px;
	height:25px;
	border: solid 10px black;
}		
#withpadding_noborder{
	background-color:orange;
	width:100px;
	height:25px;
	padding-left:100px;
}		
#withpadding_withborder{
	background-color:orange;
	width:100px;
	height:25px;
	padding-left:100px;
	border: solid 10px black;
}