Eliminar espacio extra en la parte inferior del elemento de la lista HTML

Question

¿Hay alguna manera de eliminar el espacio adicional que se muestra en la parte inferior de una etiqueta de elemento de lista HTML sin establecer una altura fija en el elemento de la lista? Es decir Me gustaría que el elemento de la lista se ajuste a su contenido.

El siguiente código muestra 3 imágenes en una lista horizontal pero la altura de cada etiqueta li es 4px más que la imagen. Me gustaría envolver la imagen, es decir, tener el mismo ancho y alto. Actualmente, el ancho es el mismo, pero no puedo hacer coincidir la altura.

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

Answer 1

Este es su código: http://jsfiddle.net/23LcK/

La brecha es nada que ver con los li s. Es el espacio reservado para los descensores en letras como g y p (porque img s son elementos inline).

se puede quitar con cualquiera de estos aplicado a li img:

• display: block: http://jsfiddle.net/23LcK/1/
• vertical-align con top o bottom: http://jsfiddle.net/23LcK/2/

Answer 2

Esto debe hacerlo por usted.

ul{margin-bottom:0} 

Answer 3

li está envuelto en ul, que por defecto tiene algo de relleno. Por lo tanto, como dijo @Michael, tienes que poner a cero el relleno del elemento ul.

Para evitar estos problemas, siempre intente utilizar reset.css.

FYI: Los navegadores aplican un CSS predeterminado en las páginas web. Es por eso que ve elementos h1 tan grandes cuando no hay CSS en su sitio. Porque los navegadores tienen un CSS predeterminado. Y como los navegadores provienen de diferentes compañías, tienen diferentes CSS predeterminados. Por ejemplo, un navegador puede usar 10px de margen para los párrafos, mientras que otro navegador 12px. Esto significa que siempre tiene inconsistencias en su diseño. Pero un restablecimiento CSS está hecho de algunas reglas generales que eliminan estos estilos CSS predeterminados.

Answer 4

li img { 
    vertical-align: bottom; 
} 

Answer 5

Probablemente hay un margen o relleno predeterminado en el elemento img en el navegador que está utilizando. Puede eliminar esta usando algo como esto:

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

navegadores web como diferentes utilizan diferentes estilos por defecto se recomienda utilizar una hoja de estilos de reset. Esto establece una carga completa de cosas para los valores predeterminados razonables para que pueda obtener un estilo más consistente en los navegadores. Debido a que restablece todo a valores predeterminados razonables, siempre debe cargar la hoja de estilo de restablecimiento antes que cualquier otra hoja de estilo.

Como @Saeed mencionó que hay una buena hoja de estilo de reinicio, así como más información sobre por qué debería usarlos here.

Answer 6

Establecer línea-altura: 0; en el LI

li { 
    line-height: 0; 
} 

He aquí una jsFiddle para probar que funciona - http://jsfiddle.net/jm9Tj/