Supprimer l'espace supplémentaire au bas de l'élément de liste HTML

Est-il possible de supprimer l'espace supplémentaire apparaît au bas de HTML balise d'Élément de Liste sans définir une hauteur fixe sur l'élément de la liste? I. e. Je voudrais l'élément de la liste pour l'envelopper de son contenu.

Le code suivant montre 3 images dans une liste horizontale, mais la hauteur de chaque balise li est 4px plus que l'image. J'aimerais qu'elle s'enrouler autour de l'image, c'est à dire avoir la même largeur et la hauteur. La largeur est actuellement le même, mais j'ai juste ne peut pas obtenir la hauteur de match.

HTML:

<ul>
    <li><img alt="img1" src="img1.jpg" /></li>
    <li><img alt="img2" src="img2.jpg" /></li>
    <li><img alt="img3" src="img3.jpg" /></li>
</ul>

CSS:

li 
{ 
    display:block; 
    float:left; 
    margin:0;
    padding:0;
    background-color:Yellow;
}

source d'informationauteur

  1. 26

    C'est votre code: http://jsfiddle.net/23LcK/

    L'écart n'est rien à voir avec la lis. C'est l'espace réservé pour les jambages des lettres comme g et p (parce que le imgs sont inline éléments).

    Vous pouvez le supprimer avec l'un de ces appliquée à la li img:

  2. 10

    Ensemble line-height:0; sur le LI

    li {
  line-height: 0;
}

    Voici un jsfiddle pour prouver que cela fonctionne - http://jsfiddle.net/jm9Tj/

  3. 2

    Cela devrait le faire pour vous.

    ul{margin-bottom:0}
  4. 2

    li est enveloppé dans de l'ul, qui a par défaut du rembourrage. Donc comme @Michael a dit, vous devez remettre à zéro le remplissage de l'élément ul.

    Pour éviter ces problèmes, essayez toujours d'utiliser réinitialiser.css.

    Pour info: les Navigateurs appliquer un CSS par défaut sur les pages web. C'est pourquoi vous voyez les éléments h1 que grand quand il n'y a pas de CSS de votre site. Parce que les navigateurs ont un CSS par défaut. Et depuis que les navigateurs venus de différentes entreprises, ils ont des CSS par défaut. Par exemple, un navigateur peut utiliser des 10px de marge pour les paragraphes, tandis qu'un autre navigateur de l'utilisateur 12px. Cela signifie que vous avez toujours des incohérences dans votre conception. Mais un reset CSS est composé de quelques règles générales qui supprime ces valeurs par défaut des styles CSS.

  5. 0
    li img {
    vertical-align: bottom;
}
  6. 0

    Il y a probablement une marge par défaut ou de rembourrage sur l'élément img dans le navigateur que vous utilisez. Vous pouvez le supprimer en utilisant quelque chose comme ceci:

    li img {
    margin: 0;
    padding: 0;
}

    Que les différents navigateurs web utilisation des différents styles par défaut, il est recommandé que vous utilisez un reset de la feuille de style. Cela pose un tas de trucs à des valeurs par défaut raisonnables de sorte que vous obtenez plus cohérente style à travers les navigateurs. Parce qu'il réinitialise toutes les valeurs par défaut raisonnables, vous devriez toujours charger la réinitialisation de la feuille de style avant toutes les autres feuilles de style.

    @Saeed mentionné qu'il y avait un bon reset de la feuille de style ainsi que plus d'informations sur pourquoi vous devez les utiliser ici.