CSS - margine: auto - Come funziona

Usare il margin:auto per centrare un elemento del blocco in senso orizzontale è una tecnica ben nota. Ma ti sei mai chiesto perché o come funziona? Per rispondere a questo, dobbiamo prima dare un'occhiata a come margine: funziona automaticamente. Inoltre nel mix è ciò che auto può fare nei margini, se funziona per il centraggio verticale, e alcuni altri problemi.

Ma prima, cosa fa effettivamente l' auto ?

La definizione di auto varia con elementi, tipi di elementi e contesto . Ai margini, auto può significare una delle due cose: occupare lo spazio disponibile o 0 px. Questi due definiranno layout diversi per un elemento .

"auto" che occupa lo spazio disponibile

Questo è l'uso più comune del margine auto incontriamo spesso. Assegnando l' auto ai margini sinistro e destro di un elemento, occupano lo spazio orizzontale disponibile nel contenitore dell'elemento in modo uguale e quindi l'elemento viene centrato.

Tuttavia, questo funzionerà solo per i margini orizzontali (più sul perché dopo), e inoltre non funzionerà con elementi flottanti e inline e da solo, non può funzionare anche in elementi posizionati in modo assoluto e fisso (vedremo comunque come fare in modo che funzionino).

Faux Float prendendo spazio disponibile

Dal momento che l' auto in entrambi i margini destro e sinistro occupa lo spazio "disponibile" allo stesso modo, cosa pensi che accadrà quando il valore auto viene assegnato a uno solo di quelli?

Un margine sinistro o destro con auto occuperà tutto lo spazio "disponibile" facendo apparire l'elemento come se fosse stato svuotato a destra oa sinistra.

"Auto" calcolato su 0px

Come accennato prima, l' auto non funzionerà in elementi flottati, in linea e assoluti. Tutti questi elementi hanno già deciso i loro layout, quindi non serve usare l' auto per i margini e aspettarsi che venga centrato proprio così.

Ciò vanificherebbe lo scopo iniziale di usare qualcosa come float . Quindi l' auto avrà un valore di 0px in quegli elementi.

auto non funzionerà anche su un elemento di blocco tipico se non ha una larghezza. Tutti gli esempi che ti ho mostrato finora hanno larghezze.

Una larghezza di valore auto avrà margini di 0px . La larghezza di un elemento di blocco in genere copre il suo contenitore quando è auto o 100% e quindi un margine auto verrà calcolato su 0px in questo caso.

Cosa succede ai margini verticali con il valore auto ?

auto nei margini superiore e inferiore viene sempre calcolata su 0px (tranne che per gli elementi assoluti). Le specifiche W3C lo dicono così:

"Se" margin-top "o" margin-bottom "è" auto ", il loro valore utilizzato è 0"

Il perché, beh, è ​​così lontano, un mistero. Potrebbe essere dovuto al tipico flusso di pagine verticali, in cui le dimensioni della pagina aumentano in base all'altezza . Quindi, centrare un elemento verticalmente nel suo contenitore non lo farà apparire centrato rispetto alla pagina stessa, a differenza di quando è fatto orizzontalmente (nella maggior parte dei casi).

E forse a causa di questa stessa ragione, hanno deciso di aggiungere un'eccezione per gli elementi assoluti che possono essere centrati verticalmente lungo l'intera altezza della pagina.

Potrebbe anche essere a causa dell'effetto collasso del margine (un crollo dei margini degli elementi adiacenti) che costituisce un'altra eccezione per i margini verticali.

Tuttavia, quest'ultimo sembra essere un caso improbabile - poiché gli elementi che non collassano i margini - come Floats e gli elementi con overflow diversi da quelli visible, assegnano ancora 0px margini verticali per l' auto .

Centraggio di elementi assolutamente posizionati

Poiché si verifica un'eccezione per gli elementi posizionati in modo assoluto, utilizzeremo il valore auto per centrare uno in verticale e in orizzontale. Ma prima di questo, abbiamo bisogno di scoprire quando sarà margin:auto realtà funziona come lo vogliamo in un elemento assolutamente posizionato.

Qui è dove arriva un'altra specifica W3C:

"Se tutti e tre i" left ", " width "e" right "sono" auto ": prima imposta tutti i valori" auto "per" margin-left "e" margin-right "su 0 ... "

"Se nessuno dei tre è" auto ": se" margin-left "e" margin-right "sono" auto ", risolvi l'equazione sotto il vincolo extra che i due margini ottengono valori uguali"

Questo dice che per auto margini auto orizzontali per ottenere spazi uguali, i valori per left, width e right non dovrebbero essere auto, il loro valore predefinito. Quindi tutto ciò che dobbiamo fare è dare loro un valore in un elemento assolutamente posizionato. left e right dovrebbero avere valori uguali per un centraggio perfetto .

La specifica menziona anche qualcosa di simile per i margini verticali.

"Se tutti e tre i" top ", " height "e" bottom "sono auto, imposta" top "sulla posizione statica ..."

"Se nessuno dei tre è" auto ": se" margin-top "e" margin-bottom "sono" auto ", risolvi l'equazione sotto il vincolo extra che i due margini ottengono valori uguali ..."

Quindi, affinché un elemento assoluto sia centrato verticalmente, i suoi valori top, height e bottom non dovrebbero essere auto .

Ora combinando tutti questi, questo è ciò che otterremo:

Conclusione

Se vuoi scaricare un elemento della tua pagina a destra oa sinistra senza i seguenti elementi che lo avvolgono (come quello che succede con float), ricorda che c'è l'opzione per usare auto per i margini.

Convertire un elemento in assoluto solo per poterlo centrare verticalmente potrebbe non essere una grande idea. Ci sono altre opzioni come flexbox e CSS transform che sono più adatte a quelle.

Generazione automatica di bellissime tavolozze di colori con atmosfera

Che tu sia un designer UI / UX o un artista digitale, dovresti sapere che il colore è fondamentale per il prodotto finale .Ma trovare la giusta combinazione di colori è dura e di solito comporta molti tentativi ed errori. Con Ambiance, puoi generare automaticamente schemi di colori direttamente dall'API COLOURlovers, il tutto con un clic di un pulsante!Q

(Consigli tecnici e di design)

Google's War on Fake News: sarà ora controllare la tua query di ricerca

Mesi dopo essere stati criticati per aver permesso alle notizie false di dominare su Internet, Google è finalmente pronto ad affrontare il problema mentre il gigante tecnologico ha finalmente implementato un sistema di controllo dei fatti sul suo motore di ricerca. La parte migliore di questo? Questo sistema è disponibile in tutto il mondo .D

(Consigli tecnici e di design)