Welcome to WebmasterWorld Guest from 3.227.3.146

Forum Moderators: not2easy

Message Too Old, No Replies

Setting padding or margin for HR tag

     
10:28 pm on Mar 25, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Mar 27, 2004
posts:276
votes: 0


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
10:50 pm on Mar 25, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 1, 2002
posts:1834
votes: 0


Not sure, but you might try line-height

WBF

8:36 am on Mar 26, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 4, 2002
posts:385
votes: 0


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.

6:15 pm on Mar 26, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 29, 2002
posts:533
votes: 0


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>
7:54 pm on Mar 26, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 4, 2002
posts:385
votes: 0


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;
}