"margin"     

margin: 2cm 3cm 3cm 4cm;

valori: auto || [lunghezze] || [percentuali] || initial || inherit || EREDITATA

Video guide   xx - xx

 

margin:5px 10px 15px 20px;
top margin è 5px (sopra)
right margin è 10px (destro)
bottom margin è 15px (sotto)
left margin è 20px (sinistro)
  margin:5px 10px 15px;
top margin è 5px (sopra)
right e left margins sono 10px (sinistro e destro)
bottom margin è 15px (sotto)
     
margin:5px 10px;
top e bottom margins sono 5px (sopra e sotto)
right e left margins sono 10px (destro e sinistro)
  margin:10px;
tutti i margini sono 10px

Esempio 58: grazie al float l'immagine si posiziona a sinistra del testo. La proprietà float viene utilizzata per posizionare e formattare il contenuto, ad es. lascia che un'immagine fluttui a sinistra nel testo in un contenitore. Il contenitore è delimitato dal div, gli stili per il div sono collegati ad una classe (wrapper).  Risultato

Esempio 47: usiamo il nuovo elemento Html5 "Article" e 2 proprietà Css "width" e "margin" per centrare nella pagina solo un articolo.  Risultato

Esempio 46: usiamo 3 classi tutte collegate allo stesso elemento (div) per: centrare una intestazione (il suo contenitore) + centrare il testo + padding.  Risultato

Esempio 43: di default i browser applicano degli stili di base vediamo in questo esempio cosa succede se eliminiamo le due proprietà (margin e padding) usate per la spaziatura (esterna ed interna) degli oggetti. Risultato (pagina normale)

Esempio 33: utilizzare i css "margin" e "width" (i margini e la larghezza) per centrare un contenitore o la pagina intera (vedi anche esempio 9).  Risultato

Esempio 09: centrare la pagina web usando le proprietà Css "Margin" e "Width", usato un div contenitore.  Risultato