Margine vs. Imbottitura in Internet Explorer 7

June 9

Le differenze tra margini e padding non sono chiari a un sacco di aspiranti Web designer che sono nuovi per fogli di stile CSS. Internet Explorer 7 ha un migliore supporto CSS di IE6, ma il browser ha ancora alcune stranezze. Per creare un sito web che è compatibile su più browser, è necessario conoscere sia la differenza tra margini e padding, nonché alcune correzioni che si potrebbe essere necessario aggiungere al codice di fare una visualizzazione della pagina correttamente in IE7.

margini

Margini aggiungere spazio bianco intorno al bordo di un elemento. Margini influenzano quanto vicino altri elementi sono tra loro. I margini possono essere positivi o negativi. Se il valore di un margine è abbastanza basso, gli elementi si sovrappongono. Internet Explorer ha due attributi HTML non standard, denominato "TopMargin" e "leftmargin", che cancella il lato superiore e sinistro di un documento Web. W3C, associazione che determina gli standard Web attuali, depreca l'uso di questi attributi, dal momento che i CSS offre soluzioni efficienti, più flessibili per raggiungere gli stessi risultati. Le proprietà dei margini standard utilizzati in CSS sono i seguenti: "margine", "margin-top", "margin-bottom", "margin-right" e "margin-left".

Imbottitura

inserti imbottitura di riempimento lungo il bordo interno di un elemento. A differenza dei margini, padding non è trasparente. Si adotta il colore dell'elemento esso modifica sfondo. Negli anni '90, i Web designer spesso usato "cellpadding" per aggiungere ulteriore spazio per l'area all'interno di una cella di tabella, ma dal momento che le tabelle non hanno molto scopo nella moderna progettazione Web, e dal momento che i CSS in grado di produrre lo stesso effetto, l'attributo è raramente utilizzato. Internet Explorer 7 e altri browser Web moderni usano il "padding", "padding-top", "padding-bottom" e le proprietà "padding-left" per aggiungere imbottitura per gli elementi.

Valori

I margini possono utilizzare uno dei seguenti valori: auto, lunghezza,% o ereditare. "Auto" permette al browser Web per definire la dimensione dei margini; "Lunghezza" specifica il valore fisso di un margine di utilizzare un'unità supportata, come "px", "pt" o "em"; "%" Indica la percentuale di spazio margine occupa; e "ereditano" adotta i valori dell'elemento genitore. Imbottitura funziona in modo simile, con la differenza che non include un valore "auto".

quirks

Microsoft ha risolto il bug doppio margine di IE6, ma ha introdotto un nuovo errore in IE7. Internet Explorer 7 ignora il tag "margin-bottom" in un elemento flottante, anche se non ha alcun problema di rendering "padding-bottom". Una soluzione comune consiste nell'inserire il galleggiante in un elemento padre, aggiungendo poi "padding-bottom" per l'elemento padre per ottenere lo stesso risultato di "margin-bottom".