Spaziature

Organizzare gli spazi all'interno di una pagina è fondamentale per dare armonia e chiarezza ai contenuti, modificando padding e margin anche in ottica responsive.
Qui potrai reperire una vasta gamma di classi per poter gestire e organizzare gli spazi all'interno delle pagine nell'Ecosistema digitale Turismo Cultura.

Utilizzo

E' possibile assegnare a ciascun elemento html delle classi ad hoc per modificare i valori di margin o di padding, settando le singole proprietà o le coppie di proprietà in base alla direzione: x e y per orizzontale e verticale. Le dimensioni delle spaziature possono variare da .25rem a 3rem.

Le classi che sono applicabili per tutti i breakpoint da xs to xl non hanno alcun breakpoint nei loro nome, poiché sono applicate da min-width: 0 in su, e quindi non sono legate a media query. Le classi sono denominate utilizzando il formato {proprietà}{lato}-{dimensione} per xs e {proprietà}{lato}-{breakpoint}-{dimensione} per sm, md, lg, e xl.

Dove la proprietà è:

  • m - per le classi che impostano margin
  • p - per le classi che impostano padding

Dove uno dei lati è tra:

  • t - per le classi che impostano margin-top o padding-top
  • b - per le classi che impostano margin-bottom o padding-bottom
  • l - per le classi che impostano margin-left o padding-left
  • r - per le classi che impostano margin-right o padding-right
  • x - per le classi che impostano insieme *-left o *-right
  • y - per le classi che impostano insieme *-top o *-bottom
  • blank - per le classi che impostano margin o padding su tutti e quattro i lati dell'elemento

Dove la dimensione è una tra:

  • 0 - per le classi che eliminano margin o padding impostandolo a 0
  • 1 - (di default) per le classi che impostano margin o padding a .25rem
  • 2 - (di default) per le classi che impostano margin o padding a .5rem
  • 3 - (di default) per le classi che impostano margin o padding a 1rem
  • 4 - (di default) per le classi che impostano margin o padding a 1.5rem
  • 5 - (di default) per le classi che impostano margin o padding a 3rem
  • auto - per classi che impostano margin ad auto

Infine, è possibile centrare un elemento orizzontalmente utilizzando la classe mx-auto che imposta i margini laterali ad auto, con contenuto in display: block

Ulteriori informazioni sull'utilizzo degli spazi

Per approfondire l'uso delle spaziature visita la pagina Spacing di Bootstrap.