Sintassi

Significato dei valori principali:

• 1 valore: Imposta lo stesso padding sia all’inizio che alla fine del blocco (di solito top e bottom).

• 2 valori: Il primo valore si applica all'inizio del blocco, il secondo alla fine (ad esempio: padding-block: 20px 40px).

• valori accettati: unità di lunghezza come px, em, rem, %, ecc.

Esempio proprietà: padding-block

Codice Esempio: padding-block

CODE: CSS

1. .padding-block-example {

2.   writing-mode: horizontal-tb;

3.   padding-block: 30px 10px;

4.   background-color: #50a14f;

5.   color: white;

6.   font-size: 22px;

7.   text-align: center;

8.   border-radius: 10px;

9. }

Contenuto Esempio: padding-block

  
  <style>
    .padding-block-example {
      writing-mode: horizontal-tb;
      padding-block: 30px 10px;
      background-color: #50a14f;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
    }
  </style>

  <div class="padding-block-example">
    Padding logico verticale
  </div>
  

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