<HTML>
<HEAD>
 <TITLE>Margins</TITLE>
 <style>
 <!--
.base	{}
.separate {margin-left:50px;
	 margin-right:60px;
	 text-align:justify}
 .bigred {font-family:Arial, Helvetica, sans-serif;
	font-weight:700;
	font-size:35px;
	color:red;
	text-indent:50px;}
				
.italicblue	{text-indent:70px;
		font-size:20pt;
		font-style:italic;
		font-weight:700;
		font-family:Harrington,script;
		color:blue;
		margin-top:-30px}

.overlap {font-size:20pt;
	 font-family:Times New Roman, Times, serif;
	 font-style:italic;
	 color:#FFCE08;
	 margin-top:-20;
	 margin-left:100}
.inicap	{font-size:20pt}
#small	{font-size:8pt}
 --7gt;
 </style>
<HEAD7gt;

<BODY>
<span class=inicap>M</span>argins can be
set for all
<B>Block-Level</B> elements. Margins for
each side can be set separately. Negative
margins, used below for overlaps, can be erratic.
<hr>
<p class=separate ID=small><span class=
inicap>S</span>eparating block-level elements
can be managed with margins.Note that the small
font size of this paragraph is achieved by
applying both a CLASS and an ID to the <P>
tag. Text is justified from the class definition.
<hr class=separate>
<div class=bigred>
<p>
<p>Careful margins
<p class=italicblue>create special effects</span>
</div7gt;
<p> 
<div class=base>
<IMG SRC="red.gif" WIDTH=200 HEIGHT=64 BORDER=0
ALT="">
</div>
<div class=overlap>
Text overlapping image in IE3+!
</div>

</BODY>
</HTML>