Salve a tutti, ho un problema da cui non riesco a uscire, sarà la stanchezza di oggi ma proprio non riesco a risolvere.
Ho il seguente css :

codice:
#wrap {
	width: 950px;
	margin: auto;
}

#header {
	width: 947px;
	height: 400px;
}

#articoli {
	width: 947px;
}
#altri_articoli {
	width: 947px;
}
#video_e_altro {
	width: 947px;
}
#upper_header {
	background-image: url(images/template_03.jpg);
	background-repeat: no-repeat;
	height: 103px;
	width: 937px;
}
#apertura {
	background-image: url(images/template_05.jpg);
	background-repeat: no-repeat;
	height: 18px;
	width: 40px;
	float: left;
}
#menu {
	height: 18px;
	clear: both;

}
#menu1 {
	background-image: url(images/template_06.jpg);
	background-repeat: no-repeat;
	height: 18px;
	width: 73px;
	float: left;
}
#menu2 {
	background-image: url(images/template_07.jpg);
	background-repeat: no-repeat;
	height: 18px;
	width: 66px;
	float: left;
}
#menu3 {
	background-image: url(images/template_08.jpg);
	background-repeat: no-repeat;
	height: 18px;
	width: 64px;
	float: left;
}
#menu4 {
	background-image: url(images/template_09.jpg);
	background-repeat: no-repeat;
	height: 18px;
	width: 110px;
	float: left;
}
#menu5 {
	background-image: url(images/template_11.jpg);
	background-repeat: no-repeat;
	height: 18px;
	width: 73px;
	float: left;
}
#menu6 {
	background-image: url(images/template_10.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 18px;
	width: 81px;
}
#ricerca {
	background-image: url(images/template_12.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 18px;
	width: 430px;
}
#lower_header {
	background-image: url(images/template_13.jpg);
	background-repeat: no-repeat;
	height: 35px;
	width: 937px;
}
#cleaner {
	clear: both;
}
E questo html :

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrap">

<div id="header">

	<div id="upper_header"></div>
	<div id="middle_header">
    	<div id="menu">
            <div id="apertura"></div>
            <div id="menu1"></div>
            <div id="menu2"></div>
            <div id="menu3"></div>
            <div id="menu4"></div>
            <div id="menu5"></div>
            <div id="menu6"></div>
            <div id="ricerca"></div>
        </div>
    </div>
	<div id="lower_header"></div>
    
</div>

</div>

</body>
</html>
Il problema che mi si pone è il seguente, come potete vedere nell'immagine, cioè lo spazio bianco che mi appare tra la fine del div con id menu e quello con id lower_header. Dove sbaglio?
Anche xchè non ho ancora impostato bordi o altro, per ora ho solo usato il background per inserire le immagini nel layout.



EDIT : Ho risolto ora impostando il margin-bottom del div menu a -1px... non so se la soluzione è corretta ma sopratutto vorrei capire xchè così funziona.