Setting padding or margin for HR tag

[Kysmiley]

Is there anyway to set a top or bottom margin with the HR tag I have tried
#content hr {
border: 0;
color: red;
background-color: red;
margin-top: 5px;
}
and it does not work. In IE the line is about 5 px under the image but in firefox it is directly under it, just touching it.
Can someone let me know how to get it looking as if it is 5 px under the image in both
Pat

[willybfriendly]

Not sure, but you might try line-height

WBF

[zollerwagner]

That's interesting. What I've learned is that top and bottom margins overlap, so that the greatest will be the one you see. That's not happening here. Have you tried setting the padding? It won't collapse even if there is padding on both.

Let us know how it goes.

[MWpro]

You can always make your own HR.

#content div.hr {
width: 100%;
height: 2px;
border: 0;
background-color: red;
margin-top: 5px;
}

And then just do this in the html

<div class="hr"></div>

[zollerwagner]

That's a good idea.

Another approach I usually take is to add a border to something rather than use the <hr>. Then I don't have to have another unnecessary element in the html.

I do use the <hr> sometimes to be sure that a float is finished before I go on to the next part (usually another div). But the <hr> is hidden in that case.

hr.clrfloat {
visibility: hidden;
clear: both;
height: 0;
border: 0;
margin: 0;
padding: 0;
}