Il collasso dei margini (in inglese: margin collapse) fa parte delle specifiche per il box model e l’uso dei margini verticali. Spesso questo ‘fenomeno’ è ignorato, visto l’uso di altre proprietà che evitano il collasso, mentre ogni tanto, possono dare un risultato sconcertante che potrebbe essere considerato come un errore d’interpretazione.
Il collasso dei margini succede quando margini verticali (margin-top e margin-bottom) adiacenti, senza nessuna separazione tra di loro, di 2 o più elementi di blocco (adiacenti o innestati) si combinano per formare un unico margine.
Importante: il collasso dei margini non succede mai con elementi in linea o per i margini orizzontali (margin-left e margin-right).
Continua a leggere >>
collasso margine,
Css box model,
margin,
margin collapse,
margine
Il contenuto di una pagina è piazzato dentro ’scatole’ chiamate in inglese ‘boxes’.
Queste scatole possono a loro torno contenere altre ‘boxes’ che siano elementi di blocco o online.
Questi blocchi altro il contenuto stesso possono essere costituiti di margine (margin), spazi cuscinetti (padding) e bordi (border) gestiti dalle seguente regole css:
- margin: il spazio trasparente tra il box e altri box in unità di misura o percentuale
- padding: il spazio tra il contenuto e il bordo del box in unità di misura o percentuale
- border: il bordo decorativo attorno il box in unità di misura o percentuale
NB: margin, padding e border possono essere specificate individualmente a destra, sinistra, inferiore e superiore con l’aggiunto di right, left, top o bottom (es: margin-top, padding-left, border-bottom…)
Il contenuto stesso può avere una larghezza e/o altezza specifica con:
- width: la larghezza in unità di misura (fisso) o percentuale (fluido)
- height: l’altezza in unità di misura (fisso) o percentuale (fluido)
Il nostro box può finalmente avere uno sfondo decorativo con la proprietà css background.
Il tutto insieme costituisce il ‘box model’ come rappresentato di seguito:
Continua a leggere >>
Css box model,
css esempi,
css float,
css layout,
css margin,
css padding
