Sintassi

Significato dei valori principali:

• 1 valore: applica lo stesso padding sia all’inizio che alla fine dell’asse inline.

• 2 valori: il primo valore si applica all’inizio della linea (inline-start), il secondo alla fine (inline-end).

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

Esempio proprietà: padding-inline

Codice Esempio: padding-inline

CODE: CSS

1. .padding-inline-example {

2.   writing-mode: horizontal-tb;

3.   padding-inline: 40px 20px;

4.   background-color: #007acc;

5.   color: white;

6.   font-size: 22px;

7.   text-align: center;

8.   border-radius: 10px;

9. }

Contenuto Esempio: padding-inline

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

  <div class="padding-inline-example">
    Padding logico orizzontale
  </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