I margini ci permettono di indicare la distanza tra il bordo di un elemento é il bordo degli elementi adiacenti.

Il margine può essere indicato utilizzando i pixel come unità di misura, oppure la percentuale che indica sempre le dimensioni rispetto al contenitore oppure utilizzando la parola chiave auto.

Questo indica il browser di calcolare automaticamente la distanza in base appunto alle dimensioni del blocco e della finestra.

Quello che abbiamo detto per i bordi vale anche per il margine, sia per impostare singolarmente i valori dei margini, quindi il margine superiore e inferiore destro e sinistro, sia per quanto riguarda le forme abbreviate.

Quindi inserendo margini due punti, due valori sta ad indicare sempre margine superiore inferiore il primo valore e margine destro e sinistro.

Il secondo valore tra i valori indica sopra destra sinistra e sotto quattro valori invece sono sempre sopra destra, sotto e sinistra sempre in senso orario.

Quindi in questo esempio vediamo un margine impostato in pixel e saranno esattamente questi dieci pixel di margine, quindi come misura fissa, oppure due percento, che significa calcoli al margine in base alla dimensione del contenitore e quindi si adatterà in base allo schermo.

Infine, margine zero auto va a centrare il mio contenitore e in base alla dimensione dello schermo piccola cosa da specificare la parola chiave auto funziona solo in orizzontale, non funziona in verticale.

Vediamo subito un esempio, quindi possiamo anche andare a riciclare il nostro rettangolo di prima.

Togliamo i bordi che adesso ci creano un po' di confusione e teniamo solamente le dimensioni e il colore di sfondo.

Okay, ora vediamo proprio questa cornice che sta intorno al mio al mio rettangolo rosso.

Questa cornice che cos'è è proprio un margine che viene dato dal browser al body, quindi è una dimensione stabilita dal browser e cliccando su body vedo proprio questa regoli nah body con display blocchi e margin otto pixel.

Questa proprietà viene proprio dal foglio di stile dello user agent, cioè il mio browser.

Quindi che cosa si fa? Spesso si va a utilizzare un selettore jolly che è il selettore star o asterisco e si va a inserire un margine zero in questo modo che cosa sta che cosa stiamo andando a identificare? La star sta per tutto, quindi va a selezionare tutti i tag presenti in pagina.

Un po'di compreso ad ogni tag va a impostare margine zero quindi se ora io aggiorno la mia pagina troviamo che il rettangolo si appoggia perfettamente al bordo superiore e al bordo sinistro della pagina non c' è più la cornice bianca intorno.

Se adesso il mio rettangolo io vado ad assegnare un margine di dieci pixel é salvo vedro' proprio che il mio rettangolo si sposta di dieci pixel tutto intorno.

Per vederlo meglio posso utilizzare anche questo questo riquadro colorato che trovo in basso nella negli spector, quindi negli strumenti per sviluppatori cliccando sul mio di brecht angolo vedo che ci sono proprio dieci pixel tutto intorno restando in over anche sul sull'elemento vedo che mi evidenzia in arancione tutta la cornice intorno al contenitore perché sulla destra c'è tantissimo spazio arancione nonostante io abbia messo solamente dieci pixel perché abbiamo impostato delle misure fisse sia in larghezza e in altezza, quindi il div essendo un elemento blocco, occupa comunque tutta la riga nonostante io abbia dato una suite di cinquecento pixel, quindi significa che il mio rettangolo rosso termina qui.

Però in realtà il div sta occupando comunque tutta la riga e quindi se anche io mettessi un altro diva sotto ad esempio facciamo un rettangolo creo una regola per il quadrato square possiamo dare anche qui delle dimensioni fisse, giusto per fare l'esempio trecento pixel hit trecento pixel background-color blu e abbiamo il nostro quadratino sotto, quindi vediamo che nonostante qui ci sarebbe apparentemente spazio perché cioè del bianco in realtà il mio quadrato in realtà il mio quadrato non va a posizionarsi a fianco perché il div è un elemento blocco e quindi occupa tutta la riga.

Quindi vediamo che anche il mio quadrato in realtà a tutta questa fascia arancione quindi è tutto lo spazio che occupa virtualmente.

Quindi andando ad aumentare questo margine, ad esempio mettiamo cinquanta pixel, il mio rettangolo rosso si sposta sempre più e chiaramente abbassa anche il mio quadrato blu perché va ad occupare molto più spazio.

Possiamo andare a impostare questo margine in percentuale, quindi anziché mettere cinquanta pixel potremmo mettere ad esempio cinque per cento e quindi vediamo che il mio rettangolo a questo margine del cinque per cento e quindi stringendo la finestra questo margine si riduce perché varia in base al contenitore.

Rimettendo invece cinquanta pixel, vediamo che stringendo la finestra questo margine rimane fisso e quindi di nuovo mi compare la barra di scorrimento, quindi non si adatta, cioè poi la parola chiave margin auto che va a centrare il contenitore in orizzontale.

Vediamo un esempio se ad esempio volessimo centrare questo quadrato in orizzontale rispetto alla pagina, potremmo dare margin zero auto al nostro quadrato e voilà, il quadrato si posiziona al centro.

Anche in questo caso.

Se io allargo la finestra o stringo la finestra, il mio quadrato rimarrà sempre al centro della finestra.

Perché auto col browser in base alle dimensioni c' è una cosa importante che spesso ci fa impazzire con i margini, che è il collasso dei margini verticali.

Questa è una cosa su cui difficilmente si riesce ad avere il controllo, perché ci sono delle eccezioni in cui invece si riesce a gestire più facilmente.

Ma nella maggior parte dei casi che cosa succede? Succede che il margine tra un elemento e l'altro quando sono sovrapposti, quindi, come in questo caso due dive, ad esempio, che stiamo facendo il margine inferiore del primo blocco e il margine superiore del secondo, non si sommano tra loro, ma collassano l'uno nell'altro.

Quindi la risultante è che il margine tra i due elementi corrisponde al margine di valore maggiore tra i due a prescindere da quale quindi, se, come in questo esempio un elemento a trenta pixel di margine inferiore é l'elemento successivo a venti pixel di margine superiore, non avremo un margine di cinquanta.

Quindi non non ci sarà la somma tra i due, ma il margine tra un blocco e l'altro sarà di trenta pixel, che corrisponde proprio al margine maggiore.

Facciamo un esempio con i nostri rettangoli e i nostri quadrati, quindi abbiamo ad esempio il nostro rettangolo che ha un margine di cinquanta pixel se andassimo, anzi facciamolo uguale all'esempio quindi margin bottom trenta pixel aggiorniamo la pagina e troviamo solamente il margine inferiore.

Quindi questa volta sopra la sinistra non abbiamo nessun margine.

Se prendiamo il nostro quadrato inseriamo margin-top diventi pixel questo non si sommerà.

Troviamo proprio il quadrato uguale a com'era prima, quindi non si sposta nemmeno aggiornando la pagina.

Che cosa sta succedendo? Vediamolo bene con gli spector, quindi abbiamo il nostro rettangolo che appunto il margine inferiore lo vediamo anche qui dal nostro box model, mentre il quadrato ha un margine superiore venti pixel.

E in effetti vediamo che c' è il bordino arancione.

Però che cosa sta succedendo? Sta succedendo che il bordo arancione del rettangolo.

Quindi questa evidenziatori che vediamo va a toccare il lato del quadrato.

Quindi il bordo del quadrato non tocca il margine del quadrato, non tocca il margine del rettangolo, ma si sovrappone e quindi abbiamo proprio questo collasso di margini.

Quindi i margini che non ci aspettiamo che ci siano cinquanta pixel di distanza invece ce ne sono solamente trenta.

Quindi questo per dire che bisogna tenere conto del collasso dei margini verticali per gestire bene le spaziature.

Quindi spesso che cosa si fa? Si mette o solamente un margine inferiore a un blocco superiore oppure si mette il margine superiore al blocco che sta sotto, quindi sapendo che non si sommeranno mai.