CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS padding-left

La proprietà CSS3 padding-left imposta la spaziatura interna a sinistra

La proprietà padding-left in CSS3 è utilizzata per aggiungere spazio interno tra il bordo sinistro dell’elemento e il suo contenuto. È particolarmente utile per regolare l’allineamento del testo o di altri elementi all’interno di contenitori.

Sintassi

padding-left: valore;

Significato dei valori principali:

  • lunghezza: imposta uno spazio specifico sulla sinistra dell’elemento. Esempi: 15px, 2em, 5%.

  • percentuale (%): calcolata rispetto alla larghezza del contenitore padre.

  • valori negativi: non sono ammessi. Inserire valori negativi genera risultati inattesi.


Esempio proprietà: padding-left


Codice Esempio: padding-left

CODE: CSSpreleva codice
  1. .padding-left-example {
  2.   background-color: #6a5acd;
  3.   color: white;
  4.   font-size: 20px;
  5.   padding-left: 40px;
  6.   padding-top: 20px;
  7.   padding-bottom: 20px;
  8.   padding-right: 20px;
  9.   border: 2px solid #333;
  10.   border-radius: 6px;
  11.   width: 70%;
  12.   text-align: left;
  13.   margin: auto;
  14. }

Contenuto Esempio: padding-left

Esempio di utilizzo di padding-left

In questo esempio, padding-left viene utilizzato per aggiungere spazio interno sul lato sinistro dell’elemento:


Elemento con padding-left di 40px

CSS e HTML per l'elemento con padding-left:

  
  <style>
    .padding-left-example {
      background-color: #6a5acd;
      color: white;
      font-size: 20px;
      padding-left: 40px; /* Spazio interno a sinistra */
      padding-top: 20px;
      padding-bottom: 20px;
      padding-right: 20px;
      border: 2px solid #333;
      border-radius: 6px;
      width: 70%;
      text-align: left;
      margin: auto;
    }
  </style>
  
  <div class="padding-left-example">
      Elemento con padding-left di 40px
  </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