Padding in CSS
Usa la proprietà CSS padding (top, bottom, left, right) per impostare il padding di ciascun lato di un elemento HTML. Guarda gli esempi.
La proprietà CSS padding si usa per creare spazio attorno al contenuto di un elemento. I CSS offrono diverse proprietà con cui puoi impostare il padding per ciascun lato di un elemento (destro, sinistro, superiore e inferiore).
I singoli lati
Con l'aiuto delle seguenti proprietà puoi impostare il padding per ciascun lato di un elemento:
Come puoi intuire, per il lato superiore usiamo padding-top, per quello inferiore padding-bottom, per il lato sinistro padding-left e per quello destro padding-right.
Tutte le proprietà di padding possono avere i seguenti valori:
- length, che si usa per specificare un padding in px, pt, cm, ecc.,
- %, che specifica un padding in % della larghezza dell'elemento contenitore,
- inherit, che specifica che il padding deve essere ereditato dall'elemento genitore.
Tieni presente che la proprietà CSS padding non può accettare valori negativi. Il suo valore predefinito per tutte le proprietà di padding è 0.
Esempio delle singole proprietà di padding:
Esempio di utilizzo delle singole proprietà di padding:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
</div>
</body>
</html>Il padding come proprietà shorthand
La proprietà CSS padding è uno shorthand per le seguenti singole proprietà di padding:
Nei casi in cui la proprietà padding ha un solo valore, ad esempio padding: 35px, tutti e quattro i padding sono di 35px.
Esempio della proprietà shorthand padding con un valore:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: green;
padding: 35px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>La proprietà padding può avere 2 valori, ad esempio padding: 20px 40px, dove i padding superiore e inferiore sono di 20px e quelli destro e sinistro sono di 40px.
Esempio di padding CSS con 2 numeri
p {
padding: 20px 40px;
}Equivale al codice qui sopra.
Esempio di padding CSS con 2 numeri, forma estesa, codice
p {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}Esempio della proprietà shorthand padding con due valori:
Esempio di codice CSS padding
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
padding: 20px 40px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Risultato
La proprietà padding può avere 3 valori, ad esempio padding: 20px 15px 35px;, dove il padding superiore è di 20px, quelli destro e sinistro sono di 15px e il padding inferiore è di 35px.
Esempio di padding CSS con 3 numeri, codice
p {
padding: 20px 15px 35px;
}Equivale al codice qui sopra.
Esempio di padding CSS con 3 numeri, forma estesa, codice
p {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 35px;
padding-left: 15px;
}Esempio della proprietà shorthand padding con tre valori:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
padding: 20px 15px 35px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>E infine, la proprietà padding può avere quattro valori, ad esempio padding: 25px 50px 75px 100px;, dove il padding superiore è di 25px, quello destro di 50px, quello inferiore di 75px e quello sinistro di 100px.
Esempio dello stesso padding CSS
p {
padding: 25px 50px 75px 100px;
}Esempio della proprietà shorthand padding con quattro valori:
Esempio della proprietà shorthand padding con due valori:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #95e5f7;
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>