Margini e padding su w3.css

I margini

I margini permettono di distanziare 2 elementi HTML, o di aumentare e diminuire la distanza dagli elementi contenitori. In w3.css, possiamo agire sul margine completo (top, right, bottom, left) oppure, come nel caso dei bordi, su ogni singolo lato. Le classi che ci permettono di lavorare coi margini fanno parte del gruppo w3-margin:

• w3-margin: imposta un margine della dimensione standard w3.css ("16px") su tutti i lati
• w3-margin-top: imposta un margine della dimensione standard w3.css ("16px") sul lato superiore dell'elemento
• w3-margin-right: imposta un margine della dimensione standard w3.css ("16px") sul lato destro dell'elemento
• w3-margin-bottom: imposta un margine della dimensione standard w3.css ("16px") sul lato inferiore dell'elemento
• w3-margin-left: imposta un margine della dimensione standard w3.css ("16px") sul lato sinistro dell'elemento

Vediamo qualche esempio pratico.

Margine totale

<div class="w3-container w3-margin">
  <p>Ho un margine di 16px su tutti i lati</p>
</div>

Margine superiore

<div class="w3-container w3-margin-top">
  <p>Ho un margine di 16px sul lato superiore</p>
</div>

Margine destro

<div class="w3-container w3-margin-right">
  <p>Ho un margine di 16px sul lato destro</p>
</div>

Margine inferiore

<div class="w3-container w3-margin-bottom">
  <p>Ho un margine di 16px sul lato inferiore</p>
</div>

Margine sinistro

<div class="w3-container w3-margin-left">
  <p>Ho un margine di 16px sul lato sinistro</p>
</div>

Le "sezioni" w3.css

Un utile shortcut per impostare i margini superiore ed inferiore di un elemento in un colpo solo, è rappresentato dalla classe w3-section, che imposta il margine standard (16 px) sui lati indicati. Tale classe è molto utile nel contesto di un layout costruito con w3.css, che possiede caratteristiche comuni e consistenti nella sua struttura. La classe w3-section può essere combinata alla classe w3-container per separare gli elementi in un'unica combinazione:

<div class="w3-container w3-blue">
  <h1>Contenitore blu</h1>
</div>
<div class="w3-container w3-green">
  <h1>Contenitore verde, attaccato al contenitore blu</h1>
</div>
<div class="w3-container w3-section w3-blue">
  <h1>Contenitore blu, staccato dal contenitore verde</h1>
</div>
<div class="w3-container w3-section w3-green">
  <h1>Contenitore verde, staccato dal contenitore blu</h1>
</div>

La combinazione delle classi w3-container e w3-section produce un effetto esteticamente identico a quello ottenuto tramite la classe w3-panel.

I padding

Il padding è una particolare caratteristica degli elementi HTML, rappresentante lo "spazio" esistente tra il contenuto dell'elemento ed i lati dell'elemento stesso. Con w3.css è possibile agire sul padding in una moltitudine di modalità, attraverso le classi del gruppo w3-padding. Vediamole:

• w3-padding: imposta un padding standard di 8px ai lati verticali (top e bottom) e di 16px ai lati orizzontali (left e right)
• w3-padding-small: imposta un padding standard di 4px ai lati verticali (top e bottom) e di 8px ai lati orizzontali (left e right)
• w3-padding-large: imposta un padding standard di 12px ai lati verticali (top e bottom) e di 24px ai lati orizzontali (left e right)

Queste prime 3 classi permettono di definire le dimensioni del padding su tutti i lati di un elemento, fornendo dimensioni standard, piccole e grandi:

<div class="w3-panel w3-padding-small w3-blue">
Padding small
</div>
<div class="w3-panel w3-padding w3-blue">
Padding standard
</div>
<div class="w3-panel w3-padding-large w3-blue">
Padding large
</div>

Ma dato che la classe w3-container, che viene utilizzata estensivamente nei layout costruiti con w3.css, imposta già un padding orizzontale alla dimensione standard di 16px, abbiamo a diposizione le classi numeriche che agiscono unicamente sull'asse verticale del padding, utilizzabili con la sintassi w3-padding-[size], dove [size] è uno dei seguenti valori:

• w3-padding-16: aggiunge un padding verticale (top e bottom) di 16px
• w3-padding-24: aggiunge un padding verticale (top e bottom) di 24px
• w3-padding-32: aggiunge un padding verticale (top e bottom) di 32px
• w3-padding-48: aggiunge un padding verticale (top e bottom) di 48px
• w3-padding-64: aggiunge un padding verticale (top e bottom) di 64px

Vediamo dunque come applicare queste classi in combinazione con la classe w3-container, per ottenere effetti differenti:

<div class="w3-panel w3-padding-16 w3-orange">
  <h4>w3-padding-16</h4>
  <p>Con padding di 16px top e bottom</p>
</div>
<div class="w3-panel w3-padding-24 w3-orange">
  <h4>w3-padding-24</h4>
  <p>Con padding di 24px top e bottom </p>
</div>
<div class="w3-panel w3-padding-32 w3-orange">
  <h4>w3-padding-32</h4>
  <p>Con padding di 32px top e bottom</p>
</div>
<div class="w3-panel w3-padding-48 w3-orange">
  <h4>w3-padding-48</h4>
  <p>Con padding di 48px top e bottom</p>
</div>
<div class="w3-panel w3-padding-64 w3-orange">
  <h4>w3-padding-64</h4>
  <p>Con padding di 64px top e bottom</p>
</div>

Combinare più classi w3.css differenti

Abbiamo già avuto modo di vedere come più classi del framework w3.css siano applicabili contemporaneamente per produrre effetti completi, che di fatto sostituiscono gran parte delle righe di codice da scrivere direttamente nel CSS. Vediamo quindi alcune combinazioni che possiamo effettuare utilizzando le classi che abbiamo analizzato fin ora:

<div class="w3-container w3-blue w3-padding-32 w3-border-red w3-hover-border-blue">
  <div class="w3-red w3-padding-64 w3-text-green">
    Elemento 1
  </div>
</div>
<div class="w3-container w3-orange w3-padding-32 w3-border-blue w3-border-left">
  <div class="w3-green w3-padding w3-section w3-border-red">
    Elemento 2
  </div>
  <div class="w3-green w3-padding-32 w3-bottombar">
    Elemento 3
  </div>
</div>

Box Model di w3.css

Come ogni framework CSS che si rispetti, anche w3.css imposta un proprio Box Model specifico, che sarà consistente sui tutti i layout prodotti avvalendosi di esso ed avrà proprietà fortemente cross-browser. L'importantissima proprietà CSS box-sizing è impostata a border-box, dunque le dimensioni verticali ed orizzontali degli elementi includono il contenuto, i padding ed i bordi, fornendo risultati più intuitivi. I margini ed i padding hanno subito un reset globale, ed una reimpostazione da parte di alcune classi specifiche dedicate al layout alle dimensioni standard di 16px.

Ciò significa che lavorare con il Box Model di w3.css porta risultati prevedibili e soprattutto identici sui maggiori browser che abbiamo a disposizione, non solo sugli elementi nativi dell'HTML come bottoni, elementi dei form, link, liste, tabelle e cosi via, ma anche su elementi personalizzati forniti direttamente dal framework, come contenitori, pannelli, sezioni, badges, tabulazioni, menu dropdown, barre, barre di progressione, sidebars, tooltips, griglie, menu di paginazione e molti altri ancora.