CSS - El font-size en tiquetas <a> generan espacio extra a imágenes

 
Vista:
Imágen de perfil de Edwing

El font-size en tiquetas <a> generan espacio extra a imágenes

Publicado por Edwing (5 intervenciones) el 19/03/2015 22:39:15
Buen día a todos, mi pregunta quizá parezca muy sencilla pero de verdad quiero salir de la duda, resulta que tengo un div id="logo" , y dentro de este tengo una imagen dentro de las etiquetas de links <a>, yo suponía que al div no tener definido un "height" su altura sería únicamente establecida por la de su contenido, es decir en este caso la altura de la imagen, pero resulta que me doy cuenta que por estar la imagen entre etiquetas de link <a> se le genera un especie de "padding" inferior, busqué y revise para darme cuenta que se trataba del valor del font-size que tienen las etiquetas de link, (puesto que quito las etiquetas <a> y el espacio desaparece) para solucionarlo le di al div id="logo" un font-size=0; y dicho espacio desapareció; mi pregunta es ¿solo de ese modo puedo quitar dicho espacio? , quizá parezca un pregunta muy novata, pero enserio me tiene cabezón pensar que exista una mejor práctica para solucionar esto,.. de antemano muchas gracias ...
el código no es nada del otro mundo, lo comparto acá....

html:

1
2
3
4
5
<div id="logo">
     <a href="index.html">
          <img src="img/logo.png" alt="Logo" title="mi logo"/>
     </a>
</div>

css:

1
2
3
4
5
#logo {
	margin-left: 2px;
	max-width: 100%;
	font-size: 0;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel
Val: 2
Ha aumentado su posición en 13 puestos en CSS (en relación al último mes)
Gráfica de CSS

El font-size en tiquetas <a> generan espacio extra a imágenes

Publicado por Angel (54 intervenciones) el 20/03/2015 01:09:22
pues quitandole el padding >_< no se te debe de generar un padding automatico >_< lo debes de tener para todos los Links a href
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Edwing

El font-size en tiquetas <a> generan espacio extra a imágenes

Publicado por Edwing (5 intervenciones) el 20/03/2015 02:25:59
Hola,
lo hice, les puse a todos los <a> lo siguiente:
a {
padding: 0;
margin:0;
}

.... pero me no, sigue quedando ese espacio abajo, solo he podido quitarlo con el " font-size=0;" .. gracias por tu respuesta
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel
Val: 2
Ha aumentado su posición en 13 puestos en CSS (en relación al último mes)
Gráfica de CSS

El font-size en tiquetas <a> generan espacio extra a imágenes

Publicado por Angel (54 intervenciones) el 20/03/2015 02:40:56
tienes la web subida amigo? si no pasame los archivos de tu web en un rar yy veo como lo tienes y si ahi algun error ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Edwing

El font-size en tiquetas <a> generan espacio extra a imágenes

Publicado por Edwing (5 intervenciones) el 20/03/2015 03:14:12
OK muchas gracias amigo, mira aquí alojé un ejemplo del caso :

http://www.variedades-captain-eoa.comocreartuweb.es/

si te fijas debajo de la imagen que dice "logo" se ve una franja verde del "header", con el inspector de elementos del navegador, dale al id="logo" un estilo de font-size=0; y verás que la franja verde desaparece,¿ es esa la única manera de quitarla, muchas gracias de nuevo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel
Val: 2
Ha aumentado su posición en 13 puestos en CSS (en relación al último mes)
Gráfica de CSS

El font-size en tiquetas <a> generan espacio extra a imágenes

Publicado por Angel (54 intervenciones) el 20/03/2015 04:15:04
ese es problema de tamaño de la imagen amigo jajaja xD
basta con que centres la imagen verticalmente >_<
1
2
3
#logo img {
vertical-align: middle;
}

o hagas mas grande el height de la imagen >_<
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Edwing

El font-size en tiquetas <a> generan espacio extra a imágenes

Publicado por Edwing (5 intervenciones) el 20/03/2015 05:04:01
Pues si señor! jaja yo si me imaginaba que había una manera mas pertinente que se me estaba pasando por alto (con el vertical-align: middle;), amigo Ángel, muchas gracias por la colaboración y el interés, un abrazo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar