logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

I margini

La proprietà margin indica la distanza di ciascuno dei quattro lati di un elemento, dall'elemento che gli stà vicino oppure la distanza dell'elemento, dai bordi del documento web che stiamo creando. Può essere applicata a tutti gli elementi e non è ereditata.

La sintassi che riguarda la proprietà margin và considerata in senso orario, nel senso che il primo valore si riferisce al lato superiore (top), il secondo a quello destro (right), il terzo al lato inferiore (bottom), il quarto a quello sinistro (left). L'es. sottostante serve per chiarirci le idee.

margini


     body { margin-top: 100px;
                margin-right: 40px;
                margin-bottom: 10px;
                margin-left: 70px;
                }

Possiamo anche usare la proprietà a sintassi abbreviata:

     body { margin: 100px 40px 10px 70px;}

Guardiamo questo esempio

I vari browser stabiliscono un proprio valore di default per il padding ed il margin di ogni elemento Xhtml che compone la pagina. Questo significa che, se non specifichiamo nel CSS i valori di margin e padding degli elementi Xhtml, ogni browser farà di testa sua ed inevitabilmente le pagine web verranno visualizzate in maniera differente in ciascun browser. Una tecnica che funziona è quella di settare tutto a zero nel body e poi si comincia ad aumentare progressivamente il padding ed il margin dei vari elementi, via via che sviluppiamo il sito, e man mano che ne abbiamo bisogno.

I valori che possiamo inserire per questa proprietà, sono:


1- margin-top: Definisce la distanza tra il lato superiore di un elemento e quelli adiacenti. Si applica a tutti gli elementi e non è ereditata.

     p.select {margin-top: 10%;}
      img {margin-top: 20px;}

I valori che possiamo inserire per questa proprietà, sono:


2- margin-right: Definisce la distanza tra il lato destro di un elemento e quelli adiacenti. Si applica a tutti gli elementi e non è ereditata.

     h2 {margin-right: 10%;}
      img {margin-right: 20px;}

I valori che possiamo inserire per questa proprietà, sono:


3- margin-bottom: Definisce la distanza tra il lato inferiore di un elemento e quelli adiacenti. Si applica a tutti gli elementi e non è ereditata.

     p.cont {margin-bottom: 10%;}
     div.box {margin-bottom: 20px;}

I valori che possiamo inserire per questa proprietà, sono:


4- margin-left: Definisce la distanza tra il lato sinistro di un elemento e quelli adiacenti. Si applica a tutti gli elementi e non è ereditata.

     h1 {margin-left: 10%;}
      img {margin-left: 20px;}

I valori che possiamo inserire per questa proprietà, sono:

Per vedere la proprietà margin con i vari esempi di utilizzo, guardiamo questa pagina

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice