2011-12-15 4 views
12

Zastanawiam się, dlaczego nie jest pionowa przestrzeń pomiędzy dolną granice obrazu i elementu div w następujących przypadkach:dlaczego ten kontener jest wyższy niż wymagany do zawijania zawartego w nim obrazu?

<!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

Masz dokument HTML 4.01 Doctype, ale reszta dokumentu jest dokumentem XML o wielu nazwach. To nie ma większego sensu. – Quentin

+0

@Quentin byłoby bardziej odpowiednie użycie ''? – jela

+0

Biorąc pod uwagę, że mieszasz przestrzenie nazw, powinieneś używać DTD, który zawiera elementy, których używasz z obu. – Quentin

Odpowiedz

38

Obrazy są domyślnie, elementy inline-zastąpione. Oznacza to, że traktuje się je jak postacie. Niektóre znaki (takie jak p i q) mają podcięcia. Niektóre (takie jak a i d) nie. Obrazy są podobne do tych ostatnich.

Pod spodem musi znaleźć się miejsce pod spodem. To jest luka, którą widzisz.

Można wykonać zdjęcie display: block lub zmienić jego właściwość vertical-align, aby to zmienić.

Powiązane problemy