Web designer utilizzano regole di Cascading Style Sheet per la progettazione di pagine web. Queste regole consentono al progettista di stabilire e manipolare blocchi di contenuto che sono conosciute come div. Un problema, talvolta denominato spazio bianco insetto - creato quando il progettista tenta di collocare due di questi div side-by-side - solo per incontrare la conseguenza untended di un piccolo gruppo di spazio bianco indesiderabile esistente tra i due div. Fortunatamente, il progettista può utilizzare le regole CSS che eliminano o nascondono questo spazio bianco.

istruzione

1 Analizzare le impostazioni dei margini per ciascuno dei div problematici. Assicurarsi che i div su entrambi i lati dello spazio bianco non hanno impostazioni dei margini che stanno creando lo spazio bianco. Il margine di ogni div viene posizionato sulla superficie esterna del div. Se il div ha un margine, poi il colore di sfondo o l'immagine del div genitore può mostrare attraverso il margine e potrebbe creare un effetto di spazio bianco. Il fix può essere semplice come l'impostazione del margine dei div problema a zero.

2 Definire le impostazioni dei margini e padding uniformi per tutti gli elementi di blocco. Diversi browser applicano diverse opzioni margin e padding di default a tutti gli elementi di blocco. Il margine su uno di questi elemento di blocco può essere responsabile per la non intenzionale effetto spazio bianco in un browser, pur avendo un effetto diverso in un altro browser. Standardizzando le proprietà margin e padding in tutti i browser è possibile eliminare questo incerta.

Un insieme di regole CSS per realizzare la standardizzazione delle impostazioni elemento di blocco potrebbe apparire come segue.

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

3 Mettere contenuti nel vostro div. Alcuni browser potrebbero non visualizzare un div che non contiene contenuti, anche se questo div ha un'immagine di sfondo. Se il div non ha contenuti, quindi il browser può crollare che div rendering di una piccola quantità di spazio bianco. Per risolvere questo problema, prendere in considerazione l'inserimento di un file GIF trasparente nel div. Questo darà al vostro contenuto div che è riconosciuto dal browser, pur non alterando l'impressione visiva che si desidera creare.

4 Nest div all'interno di un elemento padre div. Assegnare un genitore o un involucro div con la custodia dei due div problemi che causano. Impostare il colore dell'elemento genitore sfondo su un colore più desiderabile o immagine che coprire lo spazio vuoto e abbinare il design del sito.

5 Rivedere le impostazioni di allineamento. Div che hanno un impostazione di allineamento di "inline" possono tendere per aggiungere pixel alla parte superiore e inferiore del div per tenere conto di variazioni di testo dal momento che l'impostazione di allineamento "in linea" è spesso usato per l'allineamento del testo. Invece di tentare di urtare due div insieme utilizzando una strategia di allineamento "in linea", semplicemente ri-assegnare l'allineamento di "blocco" e posizionare i div che utilizzano la proprietà di posizionamento "galleggiare". Qui è un esempio.

parentDiv {

blocco di visualizzazione;}

childDiv1 {

float: left;}

childDiv2 {

float: left;}