padding-top su un titolo non eseguito

[dtomasini]

Ciao a tutti.
Sto cercando di applicare uno span class su un titolo con diverse caratteristiche. Vengono eseguite tutte le caratteristiche tranne quelle di posizionamento.
Infatti io vorrei che il mio titolo sia staccato dall'elemento sovrastante di 25px. Solo che quando lo vedo in esecuzione questo si attacca all'elemento sopra.

Ho provato a fare una cosa del genere:

<div id="titolazione">
          <span class="titolo">Profilo Personale</span>
</div>
<div id="titolazione">
          <span class="titolo2">Generalità</span>
</div>

Con il CSS:

#titolazione{
	margin-top:25px;
}

.titolo{
	font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif, "Trebuchet MS";
	font-size: 18px;
	color: #092A67;
	padding-top:25px;
	padding-bottom:5px;
	font-weight:normal;
	letter-spacing: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #BEC6DE;
	margin-top: 25px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 7px;
	text-transform: uppercase;
}

.titolo2{
	font-family: Tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #F0037F;
	margin-top: 5px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 7px;
}

Nonostante tutti i margin-top o padding-top inserirti nella classe titolo la spaziatura sopra non viene eseguita.
Il bello è che titolo2 viene eseguito correttamente!
Cosa sto sbagliando?

[Mich_]

Stai usando una marcatura non corretta dal punto di vista semantico.
E comunque lo span e` un elemento di tipo inline e come tale non supporta alcune formattazioni (le dimensioni ad esempio).
Inoltre nel pezzo postato c'e` anche un errore di sintassi: non e` possibile dare id uguale a due oggetti diversi.

Per i titoli dovresti usare i tag <h1>, <h2>, ...

Non capisco l'uso che fai dello span: nel caso specifico non sembra avere uno scopo chiaro.
Le stesse formattazioni si possono dare ad un <hX>, inserendo direttamente i tag <h1>, <h2> al posto dei <div>

[dtomasini]

h10{
	font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif, "Trebuchet MS";
	font-size: 18px;
	color: #092A67;
	padding-top:25px;
	padding-bottom:5px;
	font-weight:normal;
	letter-spacing: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #BEC6DE;
	margin-top: 25px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 7px;
	text-transform: uppercase;
}

<h10>Titolo</h10>

La componente sopra il titolo è un menu che è settato nel CSS:

#menu-utente{
height:32px;
width:640px;
float:left;
border:2px solid #CFF;
background-image: url(../image);
background-repeat:repeat;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}

Non funziona comunque, imposto qualsiasi margine laterale e sotto e i componenti attorno si spostano. Ma il lato superiore rimane sempre attaccato al componente sovrastante.

[Mich_]

Il tag <h10> non esiste.

La sintassi ufficiale prevede <h1> ... <h6>, anche se qualche browser accetta anche <h7> e forse <h8>.

[dtomasini]

Io sto testando su crhome. E comunque funziona anche con h10 solo il padding-top o margin-top non funziona... Mah vallo a capire.
Il mio problema è che i primi <hx> sono già impostati per altro. Anzi, in teoria questo sarebbe il mio h1 solo che al momento non lo posso modificare perchè andrebbe a cambiare anche tutti gli altri file.
Comunque alla fine ho risolto andando a modificare il css relativo al menu sopra il titolo inserendo il margin-bottom.
Grazie mille per le risposte.