Gli ultimi tutorial di sviluppo web
 

CSS Imbottitura

❮ Precedente Prossimo capitolo ❯

Proprietà CSS Imbottitura

I CSS padding proprietà vengono utilizzati per generare lo spazio intorno al contenuto.

Le proprietà del cuscinetto impostare la dimensione dello spazio vuoto tra il contenuto dell'elemento e il bordo dell'elemento.

Questo elemento ha una imbottitura di 50px.

Imbottitura CSS

Le proprietà CSS padding definiscono lo spazio bianco tra il contenuto di un elemento e il bordo dell'elemento.

L'imbottitura cancella un'area attorno al contenuto (all'interno del confine) di un elemento.

NotaNota: L'imbottitura è influenzato dal colore dell'elemento sfondo!

Con i CSS, si ha il pieno controllo della imbottitura. Ci sono proprietà CSS per impostare il riempimento per ogni lato di un elemento (superiore, destro, inferiore e sinistra).

Imbottitura - singoli lati

CSS ha proprietà per specificare l'imbottitura per ogni lato di un elemento:

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

Tutte le proprietà di padding possono avere i seguenti valori:

  • lunghezza - specifica una imbottitura in px, pt, cm , etc.
  • % - Specifica un'imbottitura in% della larghezza dell'elemento di contenimento
  • ereditare - specifica che l'imbottitura deve essere ereditata dall'elemento genitore

L'esempio seguente imposta imbottitura diversa per tutti e quattro i lati di un <p> elemento:

Esempio

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
Prova tu stesso "

Imbottitura - Stenografia Proprietà

Per accorciare il codice, è possibile specificare tutte le proprietà del cuscinetto in una proprietà.

L' padding proprietà è una proprietà scorciatoia per le seguenti singole proprietà padding:

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

Esempio

p {
    padding: 50px 30px 50px 80px;
}
Prova tu stesso "

Quindi, ecco come funziona:

Se l' padding struttura dispone di quattro valori:

  • padding: 25px 50px 75px 100px;
    • top imbottitura è 25px
    • padding a destra è 50px
    • imbottitura di fondo è 75px
    • padding sinistro è 100px

Se l' padding struttura dispone di tre valori:

  • padding: 25px 50px 75px;
    • top imbottitura è 25px
    • imbottiture destra e sinistra sono 50px
    • imbottitura di fondo è 75px

Se l' padding proprietà ha due valori:

  • padding: 25px 50px;
    • imbottiture superiore e inferiore sono 25px
    • imbottiture destra e sinistra sono 50px

Se l' padding proprietà ha un valore:

  • padding: 25px;
    • tutte e quattro le imbottiture sono 25px
Esempi

Altri esempi

Tutte le proprietà imbottitura in una dichiarazione
Questo esempio dimostra una proprietà scorciatoia per settare tutte le proprietà imbottitura in una dichiarazione, può avere da uno a quattro valori.

Impostare l'imbottitura sinistra
Questo esempio mostra come impostare il padding sinistro di un <p> elemento.

Impostare il padding a destra
Questo esempio mostra come impostare il diritto padding di un <p> elemento.

Impostare il padding superiore
Questo esempio mostra come impostare il padding superiore di un <p> elemento.

Impostare il padding inferiore
Questo esempio mostra come impostare il padding inferiore di un <p> elemento.

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 »

Tutte le proprietà CSS padding

Proprietà Descrizione
padding Una proprietà scorciatoia per settare tutte le proprietà imbottitura in una dichiarazione
padding-bottom Imposta il padding inferiore di un elemento
padding-left Imposta il padding sinistro di un elemento
padding-right Imposta il diritto padding di un elemento
padding-top Imposta il padding superiore di un elemento

❮ Precedente Prossimo capitolo ❯