Equal?

**asa** · 03-20-2012 03:36 PM

I´m validating a website for a client last year (www.hospedajenicolas.com) and I´m not satisfied about the result!
How do I get the margin above the images equal to the margin under the images?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<head>
<meta http-equiv="content-type" content="text/ html; charset=UTF-8">
<title>Hospedaje y cabañs NicolÃ¡s</title>
<link rel="stylesheet" type="text/css" href="ex3.css">
</head>

<body>

<div id="hospedaje">
<a href="hospedaje/hospedaje.html">Hospedaje</a>
</div>
<div id="cabanas">
<a href="cabanas/cabanas.html">Cabañas</a>
</div>
<h2>Hospedaje y Cabañas</h2>
<div id="main">
<img id="nicolas" src="asa-pics/Hospedaje 15 9.JPG" alt="img hospedaje">
<img id="lago" src="asa-pics/camara 2011 049.jpg" alt="img lago Villarrica">
</div>

<p class="margin">
<h2>Villarrica</h2>
<h2>La Auracanía</h2>
<h2>CHILE</h2>
</div>

</div>

</body>
</HTML>

*{
margin:0px;
padding:0px;
}

body
{
background-color:#FAFAD2;
}

#hospedaje
{
display:block;
color:#FFFFFF;
text-align:center;
border-style:solid;
border-width:0px;
border-bottom-width:0px;
border-color:#808080;
width:50px;
height:30px;
}

{
a:hover,a:active
background-color:;
}

#cabanas
{
display:block;
color:#FFFFFF;
text-align:center;
border-style:solid;
border-width:0px;
width:20px;
height10px;
}

{
a:hover,a:active
background-color:;
}

h2
{
font-family:arial,verdana,helvetica;
color:blue;
text-align:center;
}

#main {
position:relative;
min-width:940px;
height:300px;
border:4px solid #808080;
clear:both;
background-color::#FAFAD2;
;
}

#nicolas
{
width:400px;
height:300px;
float:right;
}

#lago
{
width:400px;
height:300px;
float:left;
}

.margin
{
margin-top:20px;
margin-bottom:20px;
margin-right:50px;
margin-left:50px;
}