Reduce a white gap between two <hr> tags
html
Solution
The best solution would be to drop the `<hr>`s, and use `border-top` and `border-bottom` in conjunction with `padding` on the div.
`<hr>` should be used as a horizontal rule. For instance, a hard separation of paragraphs or a long break. And not as a visual element.
Problem
I have the following menu The two lines are both 'hr' tags and the menu is a div containing a ul. I have been googling for a while now and trying adjusting the css with margin and padding but I want to reduce the white space between the lines and the 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?