Te veel ruimte tussen H2 en HR elementen

[flbos]

Hallo iedereen,

Ik heb een pagina met daarin de volgende elementen:

<h2>Hier een titel</h2><hr class="lijn" />

Nu wil ik dat de lijn direct onder de tekst van de titel komt. Momenteel zit daar te veel ruimte tussen. Ik dacht dit te kunnen bereiken met de volgende CSS:

H2{
	width:477px;
	color:#4e4e50;
	font-size:14px;
	margin:33px 0px 0px;
}
.lijn{
	color:#80c7fd;
	margin:0px 0px 10px;
	height:1px;
}

Zoals te zien is staat de margin voor beide elementen zo ingesteld dat ze tenopzichte van elkaar geen marge zouden moeten hebben. Wat mis ik nog?

Alvast bedankt

 

[Tha Devil]

Probeer anders een de padding aan te passen.

En anders creeer je een CSS element die dezelfde eigenschappen heeft als een H2.

 

[peter vazed]

H2{
	width:477px;
	color:#4e4e50;
	font-size:14px;
	margin:33px 0px 0px 10px;
}
.lijn{
	color:#80c7fd;
	margin: -10px 0px 10px 0px;
	height:1px;
}

 

[flbos]

perfecte oplossing bedankt! nooit geweten dat je ook in de min kon met die margin

 

[flbos]

hhhm te vroeg gejuigd. Voor IE is de oplossing perfect, maar in FF werkt hij niet. FF vertoont namelijk het gedragd dat je zou verwachten, hier werkt mijn initiele code gewoon goed en komt bij gebruik van -x px margin de lijn door de kop heen te staan. Moet ik nu richting IE hacks gaan denken of is er ook een "normale" oplossing die in beide gevallen goed zal werken?