Reduce the space between the two <hr> tags

Question

I have the following menu

The two lines are the "hr" tags, and the menu is the div containing ul. I’ve been searching the Internet for a long time and am trying to customize css with fields and additions, but I want to reduce the gap between lines and text, bringing them closer to the text.

HTML:

<hr id="header_line"/> <div id="menu_bar"> <ul> <li><a href="#">Add new Form</a></li> <li><a href="#">View old forms</a></li> <li><a href="#">Reports</a></li> <li><a href="#">Site Administration</a></li> </ul> </div> <hr id="under_menu_line"/> 

CSS

 #menu_bar ul { list-style:none; padding-left:0px; } #menu_bar ul li { display:inline; padding-left:10px; } #menu_bar ul li a { text-decoration:none; color:Black; font-family:Century Gothic; font-size:12pt; } #menu_bar ul li a:hover { color:#007C5A; } #header_line { margin-top:5px; } #under_menu_line { margin-top:5px; } 

Any ideas?

Answer 1

A better solution would be to reset <hr> s and use border-top and border-bottom in combination with padding in the div.

<hr> should be used as a horizontal rule. For example, tight separation of paragraphs or a long break. And not as a visual element.

Answer 2

Like any other element, <hr> controlled by CSS. The space you want to control is just the edge. This is the default value for Firefox:

 hr { -moz-box-sizing: border-box; -moz-float-edge: margin-box; border: 1px inset; color: gray; display: block; height: 2px; margin: 0.5em auto; } 

So, the following will make 0.1em space instead of 0.5em:

 hr { margin: 0.1em auto; } 

Answer 3

Try it and say if this is really what you wanted.

 #header_line { margin-top:5px; margin-bottom:-10px;} #under_menu_line { margin-top:-10px; } 

Answer 4

Using

 #header_line{ margin-bottom:0px; } #under_menu_line{ margin-top:0px; }