CSS - Margini
La proprietà margin definisce lo spazio attorno a un elemento HTML. È possibile utilizzare valori negativi per sovrapporre il contenuto.
I valori della proprietà margin non vengono ereditati dagli elementi figlio. Ricorda che i margini verticali adiacenti (margini superiore e inferiore) collasseranno l'uno nell'altro in modo che la distanza tra i blocchi non sia la somma dei margini, ma solo il maggiore dei due margini o la stessa dimensione di un margine se entrambi sono pari.
Abbiamo le seguenti proprietà per impostare un margine di elemento.
Il margin specifica una proprietà abbreviata per impostare le proprietà del margine in una dichiarazione.
Il margin-bottom specifica il margine inferiore di un elemento.
Il margin-top specifica il margine superiore di un elemento.
Il margin-left specifica il margine sinistro di un elemento.
Il margin-right specifica il margine destro di un elemento.
Vedremo ora come utilizzare queste proprietà con esempi.
La proprietà del margine
La proprietà margin consente di impostare tutte le proprietà per i quattro margini in una dichiarazione. Ecco la sintassi per impostare il margine attorno a un paragrafo:
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà margin-bottom
La proprietà margin-bottom consente di impostare il margine inferiore di un elemento. Può avere un valore in lunghezza,% o auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà margin-top
La proprietà margin-top consente di impostare il margine superiore di un elemento. Può avere un valore in lunghezza,% o auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà margin-left
La proprietà margin-left consente di impostare il margine sinistro di un elemento. Può avere un valore in lunghezza,% o auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà margin-right
La proprietà margin-right ti consente di impostare il margine destro di un elemento. Può avere un valore in lunghezza,% o auto.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>Produrrà il seguente risultato: