I margini
Inserite nel file css il seguente codice che poi analizziamo
1 div{
2
3
4
5
6 border: 1px solid red;
7
8 width:300px;
9 height: 300px;
10 background-color: yellow;
11
12
13
14
15
16 }
17
18
19
20 .div-margin{
21 border: 1px solid red;
22
23 width:300px;
24 height: 300px;
25 background-color: yellow;
26
27 margin-left: 25px;
28
29
30
31
32
33 }
Abbiamo specificato per tutti i div della pagina larghezza ed altezza e un bordo di colore rosso e spessore 1 pixel. Mentre per i div che useranno la classe div-margin abbiamo aggiunto anche un margine sinistro con la proprietà margin-left: 25 px; . In pratica abbiamo specificato uno spazio di 25 pixel del div rispetto al margine sinistro della pagina. Ora modificate la pagina html così
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <link rel="stylesheet" href="stile.css" type="text/css">
8
9
10
11 </head>
12 <body>
13
14
15 <div>
16
17
18 <h1>Div</h1>
19
20
21 </div>
22
23
24
25 <div class="div-margin">
26
27 <h1>div2</h1>
28
29
30
31 </div>
Caricate la pagina e vedrete due div con bordo rosso ma il secondo che usa la classe div-margin dista rispetto al margine sinistro della pagina di 26 px. Notate che il secondo div risulta attaccato al primo. Ora modificate il css così
1 div{
2
3
4
5
6 border: 1px solid red;
7
8 width:300px;
9 height: 300px;
10 background-color: yellow;
11
12 margin-top:26px;
13 margin-left: 25px;
14
15 margin-bottom:15px;
16
17
18 }
19
20
21
22 .div-margin{
23 border: 1px solid red;
24
25 width:300px;
26 height: 300px;
27 background-color: yellow;
28
29 margin-left: 25px;
30
31
32
33
34
35 }
Notate che al div generale abbiamo aggiunto un margine superiore con la proprietà margin-top:26px; e un margine sinistro margin-left:25px; e un margine inferiore con margin-bottom:15px. Ora stabilendo un margine bottom in pratica abbiamo specificato che vogliamo staccarci da qualsiasi elemento che si trova subito in fondo al nostro div. Se ricaricate la pagina noterete che adesso i due div con bordo rosso risultano staccati ugualmente dal margine sinitro, e il primo div in alto risulta staccato di 15 pixel rispetto al div in basso.