Quote Originariamente inviata da fluxKami
Ancora però non capisco come mai .area prenda un'altezza maggiore dell'altezza dell'img che contiene.
Ciao, quella incongruenza nell'altezza del div è data da una serie di fattori. Sostanzialmente dipende dalla proprietà line-height del div.area, dal fatto che <img> è un elemento inline-block e che questo di default ha proprietà vertical-align: baseline.

Un elemento inline-block viene inserito all'interno del flusso del testo e intrinsecamente la sua proprietà line-height (che normalmente è maggiore di 0), relativamente al valore di vertical-align, può influire sul suo ingombro totale e quindi sull'effettiva altezza del suo contenitore.

Facciamo un semplice esempio:
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .area{
        width: 500px;
        background: green;
      }
      img{
        width:300px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="area">
      <img src="image.jpg">pippo
    </div>
  </body>
</html>
Puoi notare che per il testo "pippo", a fianco all'immagine, le gambette delle "p" sbordano oltre la linea di base (in corrispondenza del lato basso dell'immagine). L'area in cui sbordano le gambette si chiama gergalmente "parte discendente" del testo.

Questo accade comunque anche senza il testo perché, appunto, l'immagine stessa, essendo inline-block, viene considerata come se fosse del testo e piazzata partendo dalla linea di base del flusso dei contenuti, mantenendo sotto di essa quella sorta di margine che è, appunto, la parte discendente del testo.

Puoi comunque risolvere in vari modi.
Eccone alcuni:

- Applica display: block all'elemento img. Questo fa in modo di toglierlo fuori dal flusso del testo, evitando che siano considerate, per tale elemento, le proprietà caratteristiche del testo.

- Applica vertical-align: middle (o un valore differente da baseline o da super) all'elemento img. Questo piazza il testo a metà dell'altezza dell'immagine, evitando che la parte discendente del testo risulti sotto l'immagine stessa.

- Applica line-height: 0 al div.area. Questo fa in modo di azzerare l'ingombro in altezza del contenuto testuale, azzerando di fatto anche la parte discendente del testo.