2011-12-15 7 views
12

Mi chiedo il motivo per cui non v'è spazio verticale tra i bordi inferiore dell'immagine e contenenti div nel seguente:perché è il contenitore div più alto di quanto richiesto per avvolgere l'immagine che 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

si dispone di un HTML 4.01 Doctype, ma il resto del documento è un documento XML multi-namespace. Questo non ha molto senso. – Quentin

+0

@Quentin sarebbe più opportuno utilizzare ''? – jela

+0

Dato che si stia mescolando gli spazi dei nomi, è necessario utilizzare un DTD che include gli elementi che si sta utilizzando da entrambi. – Quentin

risposta

38

Le immagini sono, per impostazione predefinita, gli elementi inline-sostituito. Ciò significa che sono trattati come personaggi.

Alcuni caratteri (come p e q) hanno discendenti. Alcuni (come a e d) no. Le immagini sono simili a quest'ultimo.

Ci deve essere spazio sotto la linea per il discensore per scendere in. Questo è il divario che stai vedendo.

È possibile creare un'immagine display: block o regolare la proprietà vertical-align per modificare questo.

Problemi correlati