problemas con padding creo

Por favor me estoy por volver loca!!
Estoy empezando con css y no encuentro la manera de juntar esot elementos
Alguien me puede decir porque me pasa esto:




nose porque queda tanto espacio entre una raya y otra, ya experimente con padding y no pasa nada.
Asi se ve en el DREAMWEAVER



este es el codigo CSS que estoy usando, a donde esta mi error??

Código :

#accordion {
   margin:5px 400px;
   padding:1px
}

h3.toggler {
    vertical-align:top;
   cursor: pointer;
   border: 1px solid #454546;
   border-right-color: #ddd;
   border-bottom-color: #ddd;
   font-family: 'Arial', sans-serif;
   font-size: 12px;
   background: #454545;  
   color: #FFFFFF;  
   margin:0;
   padding-bottom:0;
   padding-top:0;
   padding-left:inherit;
   padding-right:inherit
}

div.element p, div.element h4 {
   margin-left:0;
   margin-bottom:1px;
   padding:1px;
}

Acá esta el link
http://www.targetmail.com.ar/acordeon/index.html

Bueno de paso al que le guste el menu acordeon este me pide y la mando los archivos

Primero que no se ven tus imagenes, segundo que no veo ningun error en tu pagina, explica un poquitin mas que quieres hacer o que fiuncionalidad le quieres dar a tu pagina.

mmmmmmmmmmm ... exactamente q esta sucediendo???

perdon gente!! tuve que sacar mis imagenes y el html del lugar donde las habia subido ahora lo subo a otro lado asi ven de lo que hablo

http://www.targetmail.com.ar/acordeon/acordeon/index.html
Aca podran ver el ejemplo, lo que no piedo hacer es que las barras grices se acerquen entre si, no quiero que haya tanta separacion entre ellas. pero no puedo solucionarlo, en algo estoy errando seguro, ademas estoy en el aprendizaje de css y no lo domino, pero realmente queria hacer ese efecto para una pag.

Holaaaaaaaa!! ... ok .. he revisado tu codigo ...y los H3 ... no obedecen a los paddings o margins x css ... algo q me parece raro ... pero es que claro yo tampoco he trabajado con ellos ... yo sugiero por ahora que reemplazes las etiquetas h3 ... x span ... que si obedecen los paddings y margins ... y para que ocupen todo el ancho... ponle display:block; ... al final en tu Css debe quedar asi

span.toggler {
display:block;
vertical-align:top;
cursor: pointer;
border: 1px solid #454546;
border-right-color: #ddd;
border-bottom-color: #ddd;
font-family:Arial, Helvetica, sans-serif;
font-size: 24px;
background: #454545; //borrar esto cuando se quiera usar- este color es de la linea
color: #FFFFFF; //este color es de la letra
margin:0;
padding: 0;
}

con eso veras que ahora si quedaran pegados .... como los querias inicialmente. ahh y no te olvides que en tu JS ... tambien debes hacer algunas ediciones para que ahora usen el SPAN y ya no el H3 ...

salu2
vm

Por lo que vi en tu demo, el problema es con el margin de los h3. Las etiquetas de títulos como los h3 ya traen un margin y padding predeterminado, además del tamaño de la letra. Prueba reduciendo el margin de los h3 a cero.