Уменьшают белый зазор между двумя <hr> тегами

Question

Я меню

Две линии являются метки «ч» и меню является DIV, содержащий следующие ул. Я уже давно занимаюсь поиском в Интернете и пытаюсь настроить css с полями и дополнениями, но я хочу уменьшить пробел между строками и текстом, приближая их к тексту.

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

Любые идеи?

Answer 1

Лучшее решение было бы отбросить <hr> с, и использовать border-top и border-bottom в сочетании с padding на делах.

<hr> следует использовать в качестве горизонтального правила. Например, жесткое разделение абзацев или длинный разрыв. И не как визуальный элемент.

Answer 2

Попробуйте это и скажите, если это то, что вы хотели.

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

Answer 3

Как и любой другой элемент, <hr> управляется CSS. Пространство, которое вы хотите контролировать, - это только край. Это значение по умолчанию из 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; 
} 

Таким образом, следующий будет сделать пространство 0.1em вместо 0.5em:

hr { margin: 0.1em auto; } 

Answer 4

Использование

#header_line{ 
    margin-bottom:0px; 
} 

#under_menu_line{ 
    margin-top:0px; 
}