problema ereditarietà

[LA VALE]

salve, ho un problema con l'ereditarietà.
Il css spicciolo è questo:

#content p{
	margin: 0px 0px 20px 0px;
	clear: left;
	float: left;
	width: 100%;
}
p.voci {
	text-align: left;
	font-family: arial;
	font-size: 18px;
	text-decoration: none;
	font-style: italic;
	background: url(riga.gif) repeat-y left;
	padding-left: 10px;
	padding-bottom: 5px;
	margin-left: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
}
p.titoloygy {
	text-align: left;
	font-family: verdana;
	font-size: 20px;
	color: #000000;
	text-decoration: none;
	margin-top: 7px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	font-weight: bold;
}

nella pagina html lo richiamo in questo modo:

<div id="content">


<p class="titoloygy">
prova
</p>


<p class="voci">
voce1
</p>


<p class="voci">
voce2
</p>

</div>

I paragrafi voci e titoloygy ereditano i margini 0 0 20 0 dal paragrafo generico. Come posso rimediare? devo per forza togliere i margini al paragrafo generico (cosa che non posso fare) o c'è un modo per forzare i miei paragrafi a non ereditare quell'attributo?

Grazie

-----------------------------

EDIT: ho risolto mettendo !important a margini e padding.
La domanda quindi è: !important è supportato da tutti i browser? (ho solo firefox installato non posso verificare)

[Prill]

Altrimenti, poiché usi un selettore discendente per definire l'elemento p, lo stesso dovrai fare per le diverse classi da applicare al paragrafo:

#content p.voci {
	...
}
#content p.titoloygy {
	...
}