Réduire un espace blanc entre les deux <hr> balises

J'ai le menu suivant Réduire un espace blanc entre les deux <hr> balises

Les deux lignes sont à la fois des ressources humaines des balises et le menu est un div contenant un ul. J'ai cherché sur google pour un certain temps maintenant et essayer le réglage de la css avec de la marge et le remplissage mais je veux réduire l'espace blanc entre les lignes et le texte qui les rapproche du texte.

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

Des idées?

en ce qui concerne ce que css, j'ai essayé, j'ai essayé de réglage de la marge haut/bas et la même avec un rembourrage sur tous les 3 éléments
Vous pourriez mettre un négatif en haut et en bas margin sur #menu_bar, mais c'est un peu hackish. Madara, la réponse est la meilleure option, même si, comme il est sémantiquement correct.

OriginalL'auteur Silentbob | 2013-04-12

  1. 12

    La meilleure solution serait de laisser tomber le <hr>s, et l'utilisation border-top et border-bottom en conjonction avec padding sur la div.

    <hr> devrait être utilisé comme une règle horizontale. Par exemple, un disque dur de séparation des paragraphes ou une longue pause. Et non pas comme un élément visuel.

    Merci je doit de fait depuis le début, merci pour la suggestion.
    Vous êtes les bienvenus 🙂

    OriginalL'auteur Madara Uchiha

  2. 5

    Comme avec tout autre élément, le <hr> est contrôlée par les CSS. L'espace que vous souhaitez contrôler à la marge. C'est la valeur par défaut de 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;
}

    Donc, la suite fera l'espace 0.1 em au lieu de 0.5 em:

    hr { margin: 0.1em auto; }

    OriginalL'auteur

  3. 1

    Essayer cela et me dire si cela est ce que tu voulais.

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

    OriginalL'auteur Dan Miller

  4. 0

    Utilisation

    #header_line{
    margin-bottom:0px;
}

#under_menu_line{
    margin-top:0px;
}
    Pourquoi devrait-il l'utilisation de votre réponse? S'il vous plaît ajouter plus de détails à votre réponse 🙂

    OriginalL'auteur Andrew