2011-12-15 13 views
12

Me pregunto por qué hay espacio vertical entre los bordes inferiores de la imagen y que contiene div en el siguiente:¿por qué este contenedor es más grande de lo necesario para envolver la imagen que contiene?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns:fb="http://www.facebook.com/2008/fbml"><!--facebook--> 
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<title>test</title> 

<style> 

    .box { 
     border:1px solid black; 
    } 

    .image { 
     border:1px solid red; 
    } 

</style> 

</head> 

<body> 
    <div class="box"> 
     <img class="image" src="http://i.imgur.com/o2udo.jpg" /> 
    </div> 
</body> 
</html> 
+0

Tiene un Doctype HTML 4.01, pero el resto del documento es un documento XML de espacios múltiples. Eso no tiene mucho sentido. – Quentin

+0

@Quentin ¿sería más apropiado utilizar ''? – jela

+0

Dado que está mezclando espacios de nombres, debe usar una DTD que incluya los elementos que está usando de ambos. – Quentin

Respuesta

38

Las imágenes son, por defecto, los elementos en línea-sustituido. Esto significa que son tratados como personajes.

Algunos caracteres (como p y q) tienen descendedores. Algunos (como a y d) no. Las imágenes son similares a este último.

Es necesario que haya espacio debajo de la línea para que descienda el descensor. Esa es la brecha que estás viendo.

Puede hacer una imagen display: block o ajustar su propiedad vertical-align para cambiar esto.

Cuestiones relacionadas