Margini in CSS
Usa la proprietà CSS margin per creare spazio attorno al contenuto di un elemento HTML, all'esterno dei bordi. Le proprietà per specificare il margine sono top, bottom, left e right.
La proprietà CSS margin si usa per creare spazio attorno a un elemento. I CSS offrono singole proprietà per impostare il margine per ciascun lato di un elemento (superiore, destro, inferiore e sinistro).
I singoli lati
Con l'aiuto delle seguenti proprietà puoi impostare il margine per ciascun lato di un elemento:
È già evidente che per il lato superiore usiamo margin-top, per quello inferiore margin-bottom, per il lato sinistro margin-left e per quello destro margin-right.
Tutte le proprietà di margine accettano i seguenti valori:
auto- il margine viene calcolato dal browser,length- specifica un margine inpx,pt,cm, ecc.,%- specifica un margine come percentuale della larghezza dell'elemento contenitore,inherit- specifica che il margine deve essere ereditato dall'elemento genitore.
La proprietà margin accetta valori negativi.
Il margine come proprietà shorthand
La proprietà CSS margin è uno shorthand per le seguenti singole proprietà di margine:
Quando la proprietà margin ha quattro valori diversi, nel codice appare così:
Margini diversi in CSS
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Se tutti i lati hanno gli stessi valori, ad esempio tutti i lati sono di 50px, in CSS possiamo scriverlo così.
Lo stesso margine in CSS, codice
p {
margin: 50px;
}Quando i lati superiore e inferiore hanno lo stesso valore (ad esempio 15px) e i lati sinistro e destro hanno lo stesso valore (ad esempio 10px), puoi usare il codice seguente.
Margine CSS con 2 numeri, codice
p {
margin: 15px 10px;
}Equivale a:
Margine CSS con 2 numeri, forma estesa, codice
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Quando i lati sinistro e destro sono uguali (ad esempio 15px), il lato superiore è 5px e quello inferiore è 10px, puoi scrivere:
Margine CSS con 3 numeri, codice
p {
margin: 5px 15px 10px;
}Equivale a:
Margine CSS con 3 numeri, forma estesa, codice
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Esempio della proprietà margin:
Codice della proprietà CSS margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Risultato
Il valore auto della proprietà margin
Puoi centrare orizzontalmente un elemento all'interno del suo contenitore impostando la proprietà margin su auto. Di conseguenza, l'elemento occuperà la larghezza definita e lo spazio rimanente verrà suddiviso equamente tra i margini destro e sinistro.
Esempio della proprietà margin con il valore "auto":
Esempio di utilizzo del valore "auto" della proprietà margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>Il valore inherit della proprietà margin
Nell'esempio seguente, il margine sinistro dell'elemento <p> viene ereditato dal suo elemento genitore (<div>):
Esempio della proprietà margin con il valore "inherit":
Esempio di utilizzo del valore "inherit" della proprietà margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>