Padding CSS

La spaziatura interna di questo elemento è di 70px.

Padding CSS

CSS padding L'attributo viene utilizzato per generare spazio intorno al contenuto dell'elemento all'interno di qualsiasi limite definito.

Attraverso CSS, è possibile controllare completamente la spaziatura interna (riempimento). Alcuni attributi possono impostare la spaziatura interna per ogni lato (alto, destro, basso e sinistro) dell'elemento.

Padding - Lato singolo

CSS ha proprietà per specificare la spaziatura interna per ogni lato dell'elemento:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Tutte le proprietà di spaziatura interna possono essere impostate con i seguenti valori:

  • length - Specificare la spaziatura interna in unità come px, pt, cm, ecc.
  • % - Specificare la spaziatura interna in percentuale rispetto alla larghezza dell'elemento contenitore
  • inherit - Specificare che la spaziatura interna deve essere ereditata dal elemento genitore

Suggerimento:Non sono ammessi valori negativi.

Esempio

Impostare spaziatura interna diversa per tutti e quattro i lati dell'elemento <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Prova tu stesso

Padding - Proprietà abbreviate

Per ridurre il codice, è possibile specificare tutte le proprietà di spaziatura interna in un singolo attributo.

padding La proprietà è un abbreviazione delle seguenti proprietà di margine interno:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Il meccanismo di funzionamento è il seguente:

Se padding La proprietà ha quattro valori:

  • padding: 25px 50px 75px 100px;
    • Il margine interno superiore è di 25px
    • Il margine interno destro è di 50px
    • Il margine interno inferiore è di 75px
    • Il margine interno sinistro è di 100px

Esempio

Utilizzare la proprietà abbreviata padding che ha impostato quattro valori:

div {
  padding: 25px 50px 75px 100px;
}

Prova tu stesso

Se padding La proprietà ha impostato tre valori:

  • padding: 25px 50px 75px;
    • Il margine interno superiore è di 25px
    • I margini interni destro e sinistro sono di 50px
    • Il margine interno inferiore è di 75px

Esempio

Utilizzare la proprietà abbreviata padding che ha impostato tre valori:

div {
  padding: 25px 50px 75px;
}

Prova tu stesso

Se padding La proprietà ha impostato due valori:

  • padding: 25px 50px;
    • I margini interni superiore e inferiore sono di 25px
    • I margini interni destro e sinistro sono di 50px

Esempio

Utilizzare la proprietà abbreviata padding che ha impostato due valori:

div {
  padding: 25px 50px;
}

Prova tu stesso

Se padding La proprietà ha impostato un valore:

  • padding: 25px;
    • Tutti e quattro i margini interni sono di 25px

Esempio

Utilizzare la proprietà abbreviata padding che ha impostato un valore:

div {
  padding: 25px;
}

Prova tu stesso

Margine interno e larghezza dell'elemento

CSS larghezza La proprietà specifica la larghezza dell'area del contenuto dell'elemento. L'area del contenuto è la parte interna dell'elemento (modello di box) che contiene il margine interno, il bordo e il margine.

Di conseguenza, se l'elemento ha una larghezza specificata, l'aggiunta di un margine interno aggiungerà alla larghezza totale dell'elemento. Questo è spesso un risultato indesiderato.

Esempio

In questo caso, la larghezza dell'elemento <div> è di 300px. Tuttavia, la larghezza effettiva dell'elemento <div> sarà di 350px (300px + margine interno sinistro 25px + margine interno destro 25px):

div {
  width: 300px;
  padding: 25px;
}

Prova tu stesso

Per mantenere la larghezza a 300px, indipendentemente dal riempimento, è possibile utilizzare box-sizing Proprietà. Questo farà sì che l'elemento mantenga la sua larghezza. Se si aggiunge un margine interno, lo spazio disponibile per il contenuto diminuirà.

Esempio

Utilizzare la proprietà box-sizing per mantenere la larghezza a 300px, indipendentemente dal riempimento:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Prova tu stesso

Più esempi

Impostare il margine interno sinistro
Questo esempio dimostra come impostare il margine interno sinistro dell'elemento <p>.
Impostare il margine interno destro
Questo esempio dimostra come impostare il margine interno destro dell'elemento <p>.
Impostare il margine interno superiore
Questo esempio dimostra come impostare il margine interno superiore dell'elemento <p>.
Impostare il margine interno inferiore
Questo esempio dimostra come impostare il margine interno inferiore dell'elemento <p>.

Tutte le proprietà di margine interno CSS

Proprietà Descrizione
padding Proprietà abbreviata utilizzata per impostare tutte le proprietà di margine interno in una singola dichiarazione.
padding-bottom Impostare il margine interno inferiore dell'elemento.
padding-left Impostare il margine interno sinistro dell'elemento.
padding-right Impostare la spaziatura interna destra dell'elemento.
padding-top Impostare la spaziatura interna superiore dell'elemento.

Leggi di più

Libri di approfondimento:Modello di finestra: Spaziatura interna CSS