Sintassi

Significato dei valori principali:

• lunghezza: imposta uno spazio specifico nella parte inferiore dell’elemento. Valori comuni: px, em, %, ecc.

• percentuale (%): calcolata in base alla larghezza dell'elemento contenitore.

• auto: non è un valore valido per padding-bottom.

• valori negativi: non sono ammessi. L’uso di numeri negativi non ha effetto e può generare comportamenti imprevisti.

Esempio proprietà: padding-bottom

Codice Esempio: padding-bottom

CODE: CSS

1. .padding-bottom-example {

2.   background-color: #ff9966;

3.   color: white;

4.   font-size: 20px;

5.   padding-top: 20px;

6.   padding-bottom: 40px;

7.   padding-left: 20px;

8.   padding-right: 20px;

9.   border: 2px solid #333;

10.   border-radius: 6px;

11.   width: 70%;

12.   text-align: center;

13.   margin: auto;

14. }

Contenuto Esempio: padding-bottom

  
  <style>
    .padding-bottom-example {
      background-color: #ff9966;
      color: white;
      font-size: 20px;
      padding-top: 20px;
      padding-bottom: 40px; /* Spazio interno sotto il contenuto */
      padding-left: 20px;
      padding-right: 20px;
      border: 2px solid #333;
      border-radius: 6px;
      width: 70%;
      text-align: center;
      margin: auto;
    }
  </style>
  
  <div class="padding-bottom-example">
      Elemento con padding-bottom di 40px
  </div>
  

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