Magic Gap en dessous de la liste non ordonnée dans WebLayout

Actuellement, je crée un petit site Web avec Twitter Bootstrap. J’ai déjà créé une barre de navigation et du contenu sous cette barre de navigation. Jusqu’à présent, mon arrière-plan était blanc, tout comme l’arrière-plan de la barre de navigation, donc tout allait bien.

Cependant, aujourd’hui, j’ai changé le fond de mon corps en bleu clair (juste pour le test) et j’ai remarqué un écart entre la barre de navigation et le corps. J’ai donc cherché pendant des heures une marge que j’avais réglée, mais je n’ai pas pu en trouver.

Voici un clavier où vous pouvez voir le blanc que je veux supprimer. http://jsfiddle.net/qwm6ku9x/

Une solution de contournement moche consiste à définir la hauteur de l’élément pour lequel j’ai donné l’identifiant “nav-content” à une valeur en dur. Dans cet exemple, ” width: 100px !important; ” fonctionnerait.

Cependant, je suis intéressé POURQUOI cette lacune apparaît.

Je serais très heureux si un webguru pouvait m’expliquer ce comportement.

Lorsque vous utilisez display: inline-block; Est-ce que les espaces en HTML deviennent des espaces visuels à l’écran et il existe quelques solutions pour les supprimer dans votre cas. – de David Walsh

Solution 1: supprimer l’ display: inline-block; à votre balise ul . – DEMO 1

 ul { /* display: inline-block; */ } 

Solution 2: appliquez display: block; à votre balise ul . – DEMO 2

 ul { display: block; } 

Solution 3: appliquer vertical-align: middle; ou en top ou en bottom de votre balise ul . – DEMO 3

 ul { display: inline-block; vertical-align: middle; } 

Pour plus de solutions:

Combattre l’espace entre les éléments de blocs en ligne – par Chris Coyier