Proprietà padding dello stile

Definizione e uso

Padding Proprietà che imposta o restituisce la spaziazione interna dell'elemento.

Questa proprietà può accettare da uno a quattro valori:

Proprietà margin E Attributo padding Vengono tutti inseriti spazi intorno all'elemento. Tuttavia, la differenza risiede nel fatto che il margine inserisce spazio intorno al bordo, mentre il padding lo inserisce all'interno del bordo dell'elemento.

  • Un valore, ad esempio: div {padding: 50px} - Tutti e quattro i lati avranno un spaziatore interno di 50px
  • Due valori, ad esempio: div {padding: 50px 10px} - La spaziazione interna in alto e in basso sarà di 50px, e quella laterale di 10px
  • Tre valori, ad esempio: div {padding: 50px 10px 20px} - il margine interno superiore è di 50px, i margini interni destro e sinistro sono di 10px, il margine interno inferiore è di 20px
  • Quattro valori, ad esempio: div {padding: 50px 10px 20px 30px} - il margine interno superiore è di 50px, il margine interno destro è di 10px, il margine interno inferiore è di 20px, il margine interno sinistro è di 30px

Vedi anche:

Corso CSS:Margine interno CSS

Manuale CSS:Attributo padding

Esempio

Esempio 1

Imposta il margine interno dell'elemento <div>:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Prova personalmente

Esempio 2

Cambia il margine interno di tutti e quattro i lati dell'elemento <div> a "25px":

document.getElementById("myDiv").style.padding = "25px";

Prova personalmente

Esempio 3

Restituisce il margine interno dell'elemento <div>:

alert(document.getElementById("myDiv").style.padding);

Prova personalmente

Esempio 4

Differenza tra l'attributo margin e padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Prova personalmente

Sintassi

Restituisce l'attributo padding:

oggetto.style.padding

Imposta l'attributo padding:

oggetto.style.padding = "%|length|initial|inherit"

Valore dell'attributo

Valore Descrizione
% Definire il margine interno come percentuale della larghezza dell'elemento padre.
length Definire il margine interno con unità di lunghezza.
initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Inherita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: 0
Ritorno di valore: Stringa che rappresenta il margine interno dell'elemento.
Versione CSS: CSS1

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto