CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS padding

La proprietà CSS3 padding imposta lo spazio interno dell’elemento

La proprietà padding in CSS3 permette di gestire la distanza interna tra il contenuto di un elemento e il suo bordo. È utile per migliorare la leggibilità e l'estetica degli elementi. Può essere definita con uno o più valori, specificando quantità di spazio per ogni lato.

Sintassi

padding: valore | valore verticale orizzontale | valore top right bottom left;

Significato dei valori principali:

  • lunghezza: specifica la quantità di spazio (es. 10px, 1em, 5%). Può essere definita in unità relative o assolute.

  • valore singolo: applica lo stesso padding a tutti e 4 i lati.

  • due valori: il primo per top/bottom, il secondo per right/left.

  • quattro valori: in ordine: top, right, bottom, left.


Esempio proprietà: padding


Codice Esempio: padding

CODE: CSSpreleva codice
  1. .padding-example {
  2.   background-color: #4f83cc;
  3.   color: white;
  4.   font-size: 22px;
  5.   padding: 30px 50px; /* 30px sopra e sotto, 50px a destra e sinistra */
  6.   border: 3px solid #333;
  7.   border-radius: 8px;
  8.   text-align: center;
  9.   width: 60%;
  10.   margin: auto;
  11. }

Contenuto Esempio: padding

Esempio di utilizzo di padding

In questo esempio, la proprietà padding viene utilizzata per creare spazio interno tra il bordo e il contenuto di un elemento:


Elemento con padding applicato

CSS e HTML per l'elemento con padding:

  
  <style>
    .padding-example {
      background-color: #4f83cc;
      color: white;
      font-size: 22px;
      padding: 30px 50px;
      border: 3px solid #333;
      border-radius: 8px;
      text-align: center;
      width: 60%;
      margin: auto;
    }
  </style>
  
  <div class="padding-example">
      Elemento con padding applicato
  </div>
  

Leggenda Proprietà:

Immagine Box Leggenda Proprietà

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies