Passaggio 1

Analizza l'impostazione del margine per ogni Div problematico. Assicurarsi che i Div su ciascun lato dello spazio vuoto non abbiano un'impostazione di margine che sta creando lo spazio vuoto. Il margine di ogni Div è nell'area al di fuori di esso. Se il tuo ha un margine, il colore di sfondo o l'immagine del Div principale può essere visualizzato attraverso il margine e potrebbe creare l'effetto spazio bianco. La risoluzione è semplice come impostare il margine dei Div con problemi a zero.

Passaggio 2

Definisce le impostazioni di margine e spaziatura in modo uniforme per tutti gli elementi del blocco. I diversi browser applicano diverse opzioni di margine e spaziatura predeterminata in tutti gli elementi del blocco. Il margine di uno di questi elementi di blocco può essere responsabile dell'effetto di uno spazio bianco indesiderato in un browser, pur avendo un effetto diverso in un altro browser. Standardizzando le proprietà di spaziatura e margine nei browser è possibile eliminarlo in sicurezza.

Un set di regole CSS per eseguire la standardizzazione della configurazione dell'elemento di blocco può apparire come segue:

html, body {margin: 0; padding: 0;} p {margin 0 0 3px 0; riempimento: 0;} h1, h2, h3, h4, h5, h6 {margine 0 0 2px 0; riempimento: 0;} forma {margine 0; padding: 0;}

Passaggio 3

Inserisci il contenuto nel tuo div. Alcuni browser potrebbero non mostrare un div che non ha contenuto, anche se ha un'immagine di sfondo. Se il tuo non ha contenuto, il browser può ridurlo lasciando un piccolo spazio vuoto. Per risolvere questo problema, prendi in considerazione l'inserimento di un file GIF trasparente nel Div. Questo ti darà il contenuto, che verrà riconosciuto dal browser senza modificare l'impressione visiva che desideri creare.

Passaggio 4

Annidare i Div all'interno dell'elemento div di genitori. Assegna un Div o un involucro genitore che mantenga i due Div che causano il problema. Metti un colore di sfondo all'elemento genitore per ottenere un colore o un'immagine più desiderabile che copra lo spazio bianco e si adatti al design del sito.

Passaggio 5

Controlla le proprietà di allineamento. Le div che hanno la configurazione di allineamento "in linea" (inline) possono tendere ad aggiungere pixel nella parte superiore e inferiore di Div per creare modifiche al testo poiché il parametro di allineamento "in linea" viene spesso utilizzato per l'allineamento del testo. Invece di provare a unire i due Div usando la strategia di allineamento "in linea", semplicemente riassegnare l'allineamento in "Blocco" e posizionare i Div usando la proprietà di posizionamento "float". Ecco un esempio:

parentDiv {

display: block;}

childDiv1 {

float: left;}

childDiv2 {

float: left;}