Legale un margin-bottom negativo?

[-[ Av4tar ]-]

Salve a tutti, vi spiego il mio dubbio..

ho un div, nel quale devo inserire un testo e delle immagini..

il div ha line-height: 18p e height: 18px;
il testo è di 11px e le immagini sono 11px x 11px

il mio problema è che le immagini vengono allineate in alto nella riga, mentre il testo al centro.. (nell'allegato: quadrato rosso)

allora mi chiedo.. è legale porre un margin-bottom: -5px ad esempio per fare in modo che l'immagine si allinei ? (nell'allegato: quadrato verde)

oppure sto dimenticando qualche proprietà per cui posso evitare questo paliativo?

grazie per l'attenzione

[JHammer]

In linea teorica sì...certo...in pratica fai i tuoi test con vari browser! Ho notato che IE sclera, e non poco, in situazioni di questo tipo!

Un altro trucco è di usare non immagini ma background. Il vantaggio è che puoi allineare il background verticalmente attraverso la riga

background: url("quadretto.gif") no-repeat 0px 50%;

[-[ Av4tar ]-]

Hai ragione infatti di solito faccio così..

il problema è che però spesso e volentieri ho più di queste immagini che si ripetono a intervalli non regolari

ho in mente queste due soluzioni.. dimmi tu cosa ne pensi..


1) uso il margin-bottom negativo e aggiusto l'immagine


2) il div lo chiamo 'linea' per esempio..
al suo interno metto degli <span> ai quali do un text-indent e un background ..

tipo <div id="linea"><span>testo1</span><span>testo2</span></div>

#linea span{ text-indent: 15px; background-position: lett middle; background-repeat: no-repeat;}

cosa ne dici?

[JHammer]

Non saprei...l'immagine che usi in che contesto appare?

Cioè...se si tratta di una immagine con un contenuto informativo meglio usare <img>.
Se viceversa ha il significato di icona allora meglio usare il background.


<div class="testo_con_icona">testo</div>

dove a testo_con_icona applichi il background detto prima e fai attenzione a usare il giusto padding sul testo

.testo_con_icona
{
padding-left : wpx;
line-height : hpx;
background : url("icona.gif") no-repeat 0px 50%;
}

dove w dovrà essere maggiore della larghezza dell'icona come pure h della sua altezza.

In ogni caso se usi più di questi oggetti meglio usare class invece che id che altrimenti non riesci a validarlo (id solo se hai un solo oggetto)

[-[ Av4tar ]-]

molte grazie per i consigli

vedo un po' come fare e vi farò sapere!