Make a Horizontal Rule with Css and have margins

Question

div.horizontalRule {
    clear:both;
    width:100%;
    background-color:#d1d1d1;
    height:1px;
    margin-top:5px;
    margin-bottom:5px;
}

This is what I am doing now but the Margins seem to have no effect! I am not sure why but the text above and below this "horizontal rule" touch the horizontal rule with no margins. Is there a way to implement margins in this scenario?

http://jsfiddle.net/fwqSH/

Answer 1

Problem is your not closing the div:

You cannot close a div as you did there must be a closing tag as so:

<div></div>

and not

<div />

corrected jsfiddle:

http://jsfiddle.net/fwqSH/1/

EDIT

Final solution was to add a min-height of 1px because an empty div sometimes do weird things.

Final CSS:

div.horizontalRule {
    min-height: 1px;
    clear:both; width:100%;
    border-bottom:1px solid #d1d1d1;
    height:1px; padding-top:5px;
    margin-top:5px;
    margin-bottom:5px;
}

Answer 2

The reason the text below it butts right up against the line is because you didn't properly close the div. The browser sees <div /> and thinks that the paragraph after that is part of the div. So change your HTML to something like this:

<div class="horizontalRule" runat="server"></div>