troppo spazio fr adue righe consecutive

[jacopos81]

salve
ho il seguente problema..
sono all'interno di un div dove va del testo..
ho un testo sotto all'interno di un

e sopra devo mettere un titolo e sottotitolo..
sto usando un foglio di stile esterno nel quale definisco i valori dei vari caratteri..

la sezione dove sto scrivendo si chiama "centro" e definisco cosi i vari valori..

#centro {
	background-color : #FFFFFF;
	border-bottom : #CCCCCC 0px;
	border-left : #CCCCCC 0px;
	border-right : #CCCCCC 0px;
	border-top : #CCCCCC 0px;
	color : #000000;
	margin : 0px 0px 0px 0px;
	padding-bottom : 10px;
	padding-left : 35px;
	padding-right : 0px;
	padding-top : 0px;
	voice-family : inherit;
	width : 350px;
}

#centro p {
	font: 11px Arial, Helvetica, sans-serif;
}

#centro h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 18px;
	color:#FF0000;
	
}

#centro h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#999999;

}

il problema è che quando vado a vedere la pagina, viene fuori che il titolo e il sottotilo sono tropop staccati fra di loro e rispetto al testo sotto.. c'è tropop spazio.. come se ci fossero un paio di andare a capo.. come è possibile?
devo usare qualche proprietà quando definisco h1 e h2 nel css??

grazie

<div id="centro">
<h1>La Razza</h1>
<h2>American Bulldog Johnson</h2>


Anche se utilizzato per la caccia al grosso selvatico e con ottimi risultati, l'A.B. è un vero guardiano. La famiglia sopra di tutto, anche della sua vita, per i bambini possiede un senso di protezione quasi maniacale. Verso gli estranei ha un comportamento che potrebbe trarre in inganno tanto si dimostra socievole in presenza del padrone; al minimo accenno di pericolo il cane si fà subito più attento, senza reazioni esagerate, consapevole della sua forza. Il livello di attenzione cresce proporzionalmente al pericolo, fino all'attacco, ma solo se obbligato dalle circostanze. Non necessita di un addestramento particolare perchè guardia e difesa, in senso stretto, fanno parte della sua natura. </p>
</div>

[gabip87]

personalmente porto a zero il padding ed il margin di tutti gli elementi poi regolo le distanze manualmente

*
{
   margin:0;
   padding:0;
}

inoltre, invece di

   border-bottom : #CCCCCC 0px;
   border-left : #CCCCCC 0px;
   border-right : #CCCCCC 0px;
   border-top : #CCCCCC 0px;

basta scrivere

   border:none;

se invece cambi lo spessore, e tutti e 4 saranno formattati nello stesso modo:

   border: [spessore] [tipologia] [colore];

se tutti i valori sono uguali, invece di

   margin : 0px 0px 0px 0px;

basta

   margin:0;

per

   padding-bottom : 10px;
   padding-left : 35px;
   padding-right : 0px;
   padding-top : 0px;

puoi scrivere

   padding:0 0 10px 35px;
   /*   l'ordine è:  top  right  bottom  left    */

[jacopos81]

Originariamente inviato da gabip87
personalmente porto a zero il padding ed il margin di tutti gli elementi poi regolo le distanze manualmente

*
{
   margin:0;
   padding:0;
}

ma questo settaggio cosa riguarda?? intendi dentro alla definizione di h1 e h2??

ps: sono ancora poco esperto di css, per questo non uso le notazioni brevi..

[gabip87]

l'asterisco va a "colpire" tutti gli elementi del documento. in questo preciso caso basterebbe questo codice:

h1, h2, p
{
   margin:0;
   padding:0;
}

ma in generale penso sia meglio eliminare le formattazioni di default anche per gli altri elementi.

[jacopos81]

grazie mille per i consigli..