Questo tutorial tratterà due cose: margini esterni e padding esterni.
Cominciamo con i margini esterni. Per un elemento p definito direttamente all'interno di body, specificare il margine sinistro e destro significa la distanza dai bordi esterni dell'elemento body. Se ci sono più paragrafi consecutivi, specificare il margine superiore e inferiore significa la distanza tra i singoli paragrafi.
Nella definizione dei margini e dei padding esterni, sono possibili anche valori negativi che consentono sovrapposizioni.
Impostare il margine esterno
Il margine e il padding sono lo spazio vuoto forzato tra l'elemento corrente e il suo elemento genitore o fratello. Utili sono le seguenti proprietà CSS negli elementi HTML che creano un nuovo paragrafo o un nuovo blocco.
Con margin si fa riferimento alla forma abbreviata delle quattro proprietà margin-top, margin-right, margin-bottom e margin-left. Sono possibili i seguenti valori:
• auto – il margine esterno viene calcolato automaticamente.
• Valore percentuale – si riferisce all'elemento per il quale è stato specificato il margine.
• Valore di lunghezza – sono ammessi anche valori negativi. Ciò consente sovrapposizioni di elementi.
Sono ammessi fino a quattro valori:
• un valore – margine esterno superiore, inferiore, sinistro e destro
• due valori – il primo valore per il margine esterno superiore e inferiore, il secondo valore per il margine esterno destro e sinistro
• tre valori – primo valore per il margine esterno superiore, secondo valore per il margine esterno sinistro e destro, terzo valore per il margine esterno inferiore
• quattro valori – primo valore per il margine esterno superiore, il secondo per il margine esterno destro, il terzo per il margine esterno inferiore, e il quarto per il margine esterno sinistro.
L'esempio seguente mostra l'utilizzo delle proprietà generali di margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Costruire un rig per fotocamera</p>
<p class="ex">In questo video training imparerai come creare un rig per fotocamera e spostarlo in modo sicuro attraverso lo spazio 3D. È inclusa una file di progetto.</p>
</body>
</html>
In questo esempio sono stati definiti due paragrafi di testo.
Inoltre al secondo paragrafo sono stati assegnati dei margini.
margin: 30px 50px 30px 50px;
Questo valore significa il seguente:
• Margine di 30 pixel verso l'alto
• Margine di 50 pixel verso destra
• Margine di 30 pixel verso il basso
• Margine di 50 pixel verso sinistra
Specificare gli spazi individuali
In precedenza è stata presentata la specifica generale di margin. Tuttavia è possibile anche fare specifiche individuali. Attraverso le seguenti proprietà è possibile specificare per i singoli lati di un elemento la distanza verso l'alto, sinistra, in basso o a destra.
• margin-top – margine esterno sopra
• margin-right – margine esterno a destra
• margin-bottom – margine esterno sotto
• margin-left – margine esterno a sinistra
Per tutte e quattro le proprietà si possono utilizzare i seguenti valori:
• auto – il margine esterno viene calcolato automaticamente.
• Valore percentuale – si riferisce all'elemento per cui è stato specificato margin-top, right, bottom, left.
• Valore di lunghezza – sono ammessi anche valori negativi. Ciò consente sovrapposizioni di elementi.
L'esempio seguente mostra come utilizzare efficacemente le specifiche individuali.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Costruire un rig per fotocamera</p>
<p class="ex">In questo video training imparerai come creare un rig per fotocamera e spostarlo in modo sicuro attraverso lo spazio 3D. È inclusa una file di progetto.</p>
</body>
</html>
Nel browser il risultato appare così:
Impostare lo spazio interno
Lo spazio interno è lo spazio vuoto forzato tra il contenuto dell'elemento e il suo bordo. Utili sono le seguenti proprietà CSS negli elementi HTML che creano un nuovo paragrafo o un nuovo blocco.
Con padding facciamo riferimento alla forma abbreviata delle quattro proprietà padding-top, padding-right, padding-bottom e padding-left. Attraverso di esse viene definita la larghezza tra il bordo e il contenuto di un elemento, ovvero lo spazio interno.
• Valore percentuale – si riferisce all'elemento genitore.
• Valore di lunghezza
Si possono specificare fino a quattro valori ciascuno:
• un valore – spazio interno sopra, sotto, a sinistra e a destra
• due valori – il primo valore per lo spazio interno sopra e sotto, il secondo valore per lo spazio interno a destra e sinistra
• tre valori – il primo valore per lo spazio interno sopra, il secondo valore per lo spazio interno a sinistra e a destra, il terzo valore per lo spazio interno sotto
• quattro valori – il primo valore per lo spazio interno sopra, il secondo per la destra, il terzo per il basso e il quarto per la sinistra.
Anche in questo caso un esempio:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Configurare il rig della telecamera</p>
<p class="ex">In questo video training imparerai come creare un rig per la telecamera e muoverti in modo sicuro nello spazio 3D. È inclusa un file del progetto.</p>
</body>
</html>E qui c'è anche il risultato nel browser:
Le quattro proprietà padding permettono di definire i margini interni. Le seguenti quattro proprietà CSS sono disponibili a tale scopo:
• padding-top – Distanza tra il bordo superiore del contenuto e il margine superiore
• padding-bottom – Distanza tra il bordo inferiore del contenuto e il margine inferiore
• padding-left – Distanza tra il bordo sinistro del contenuto e il margine sinistro
• padding-right – Distanza tra il bordo destro del contenuto e il margine destro.
Per tutte e quattro le proprietà possono essere utilizzati i seguenti valori:
• Percentuale - si riferisce all'elemento padre
• Lunghezza
