CSS | Espacio al pie de una foto

[BIGOTE]

Me ha pasado que al encerrar una imagen con un DIV y ponerle al mismo un
borde, me queda al pie de la foto un espacio en blanco, como si hubiera
puesto un padding-bottom. Lo he solucionado poniéndole font-size:1px; pero
me preguntaba si hay que usar este emparche sí o sí.

Por ejemplo:

<div style="border:1px solid black; width:120px; height:200px;">
<img src="foto.jpg" width="120" height="200">
</div>

Con el código anterior, se vería con un espacio al pie de la foto, pero si
le ponen font-size:1px; se acomoda exactamente.

<div style="border:1px solid black; width:120px; height:200px;
font-size:1px;">
<img src="foto.jpg" width="120" height="200">
</div>

[[Q] Marcos]

Los elementos HTML muchas veces tienen cierto margin o padding por
defecto, o una altura mínima. Es bueno eliminarlo, comunmente se hace:

*
{ margin: 0; padding: 0}

al inicio de la hoja CSS, para borrar ese margin y padding por defecto
de todos los elementos.

Saludos!

Post by BIGOTE
Me ha pasado que al encerrar una imagen con un DIV y ponerle al mismo un
borde, me queda al pie de la foto un espacio en blanco, como si hubiera
puesto un padding-bottom. Lo he solucionado poniéndole font-size:1px; pero
me preguntaba si hay que usar este emparche sí o sí.
<div style="border:1px solid black; width:120px; height:200px;">
     <img src="foto.jpg" width="120" height="200">
</div>
Con el código anterior, se vería con un espacio al pie de la foto, pero si
le ponen font-size:1px; se acomoda exactamente.
<div style="border:1px solid black; width:120px; height:200px;
font-size:1px;">
 <img src="foto.jpg" width="120" height="200">
</div>

[speculucm]

Hola BIGOTE,

Y no sería más fácil usando CSS, para tu ejemplo simplemente con:

img { border: #000000 1px solid; }

Así evitas estilitis en tu código ;)
Bueno, es una opinión.

Saludos

Post by BIGOTE
Me ha pasado que al encerrar una imagen con un DIV y ponerle al mismo un
borde, me queda al pie de la foto un espacio en blanco, como si hubiera
puesto un padding-bottom. Lo he solucionado poniéndole font-size:1px; pero
me preguntaba si hay que usar este emparche sí o sí.
<div style="border:1px solid black; width:120px; height:200px;">
<img src="foto.jpg" width="120" height="200">
</div>
Con el código anterior, se vería con un espacio al pie de la foto, pero si
le ponen font-size:1px; se acomoda exactamente.
<div style="border:1px solid black; width:120px; height:200px;
font-size:1px;">
<img src="foto.jpg" width="120" height="200">
</div>

[BIGOTE]

Ops. No sabia que se podía manejar img de esa manera.

Gracias

Post by speculucm
Hola BIGOTE,
img { border: #000000 1px solid; }
Así evitas estilitis en tu código ;)
Bueno, es una opinión.
Saludos

Post by BIGOTE
Me ha pasado que al encerrar una imagen con un DIV y ponerle al mismo un
borde, me queda al pie de la foto un espacio en blanco, como si hubiera
puesto un padding-bottom. Lo he solucionado poniéndole font-size:1px;
pero me preguntaba si hay que usar este emparche sí o sí.
<div style="border:1px solid black; width:120px; height:200px;">
<img src="foto.jpg" width="120" height="200">
</div>
Con el código anterior, se vería con un espacio al pie de la foto, pero
si le ponen font-size:1px; se acomoda exactamente.
<div style="border:1px solid black; width:120px; height:200px;
font-size:1px;">
<img src="foto.jpg" width="120" height="200">
</div>

[Lolita]

Sí pero fíjate de ponerle una ID a la imagen y aplicale el css a
#id img

que si no te pondrá el borde a todas las imágenes de tu sitio y te
volverás locolocoloco y dirás "ha sido peor el remedio que la enfermedad".

Post by BIGOTE
Ops. No sabia que se podía manejar img de esa manera.
Gracias

Post by speculucm
Hola BIGOTE,
img { border: #000000 1px solid; }
Así evitas estilitis en tu código ;)
Bueno, es una opinión.
Saludos

Post by BIGOTE
Me ha pasado que al encerrar una imagen con un DIV y ponerle al mismo un
borde, me queda al pie de la foto un espacio en blanco, como si hubiera
puesto un padding-bottom. Lo he solucionado poniéndole font-size:1px;
pero me preguntaba si hay que usar este emparche sí o sí.
<div style="border:1px solid black; width:120px; height:200px;">
<img src="foto.jpg" width="120" height="200">
</div>
Con el código anterior, se vería con un espacio al pie de la foto, pero
si le ponen font-size:1px; se acomoda exactamente.
<div style="border:1px solid black; width:120px; height:200px;
font-size:1px;">
<img src="foto.jpg" width="120" height="200">
</div>

[Andres Cayon]

Es un problema de IE con elementos inline (imagenes, por ejemplo), dentro de
elementos de bloque (un div):

2 opciones:
1.- Eliminar el salto de linea y escribir ambas etiquetas en una sola linea:
<div...><img...></div>

2.- Asignar display:block a la imagen:
<img src="foto.jpg" width="120" height="200" style="display:block">

Saludos!
Andres Cayon
http://www.dwug.es

Post by BIGOTE
Me ha pasado que al encerrar una imagen con un DIV y ponerle al mismo un
borde, me queda al pie de la foto un espacio en blanco, como si hubiera
puesto un padding-bottom. Lo he solucionado punoniéndole font-size:1px;
pero me preguntaba si hay que usar este emparche sí o sí.
<div style="border:1px solid black; width:120px; height:200px;">
<img src="foto.jpg" width="120" height="200">
</div>
Con el código anterior, se vería con un espacio al pie de la foto, pero si
le ponen font-size:1px; se acomoda exactamente.
<div style="border:1px solid black; width:120px; height:200px;
font-size:1px;">
<img src="foto.jpg" width="120" height="200">
</div>