CREARE SITI WEB in HTML e CSS > Impostare i margini con la proprietà margin
Per vedere come funzionano i margini si deve creare un secondo blocco.
1 - Dal codice HTML, tra gli elementi "body",
2 - agiungi il codice: <div>Zona numero due</div>
| codice HTML | risultato pagina web |
|
... <style type="text/css"> div { background-color: yellow; height: 50px; width: 75%; border: 5px solid gray ; } </style> </head> <body> <div>Zona numero uno</div> <div>Zona numero due</div> </body> ... |
|
Il secondo blocco si posiziona sotto al primo blocco;
e il bordo inferiore del primo blocco si unisce al bordo superiore del secondo blocco.
Per distanziare i bordi dei blocchi imposta la proprietà "margin":.
| codice HTML | risultato pagina web |
|
... <style type="text/css"> div { background-color: yellow; height: 50px; width: 75%; border: 5px solid gray ; margin: 20px; } </style> </head> <body> <div>Zona numero uno</div> <div>Zona numero due</div> </body> ... |
|
Esercitati a modificare i valori del margine (50px - 100px - eccetera).
Come per la proprietà "border", anche la proprietà "margin" è personalizzabile per ognuno dei quattro lati.
Le proprietà da applicare sono le seguenti:
"margin-top" per il lato superiore
"margin-right" per il lato destro
"margin-bottom" per il lato inferiore
"margin-left" per il lato sinistro>