Lista con overflow:hidden, padding-left e immagine floattata di height minore

L’immagine è floattata a sinistra, e l’elenco che segue ha list-style-position: outside.

  1. Abbiamo applicato all’elenco la proprietà overflow: hidden: questo evita che i puntatori si sovrappongano all’immagine
  2. Inoltre abbiamo aggiunto un padding-left: 2em
  3. Questo è sufficiente a rendere nuovamente visibili i puntatori della lista.
  4. Però se l’immagine ha un height minore della lista, allora la lista non floatterà attorno all’immagine come ci si aspetterebbe
  5. Questo accade per effetto dell’overflow: hidden. Tuttavia è un comporamento che non occulta neanche in questo caso alcun contenuto: può solo creare un fastidioso spazio vuoto nella presentazione
  6. Il paragrafo che segue la lista riprenderà al suo posto, sotto la lista

Un male tutto sommato minore!