<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>