Sintassi

Significato dei valori principali:

• un solo valore: Applica lo stesso margine sia all’inizio che alla fine dell’asse inline (es. 10px).

• due valori: Il primo è per l’inizio (margin-inline-start), il secondo per la fine (margin-inline-end).

• auto: Il margine viene calcolato automaticamente dal browser.

• lunghezza / percentuale: Valori assoluti (1rem, 20px) o relativi (15%).

Esempio proprietà: margin-inline

Codice Esempio: margin-inline

CODE: CSS

1. .margin-inline-example {

2.   background-color: #0077b6;

3.   color: white;

4.   padding: 20px;

5.   font-size: 20px;

6.   margin-inline: 50px 10px;

7.   text-align: center;

8.   border-radius: 6px;

9. }

11. .margin-inline-wrapper {

12.   background-color: #f9f9f9;

13.   padding: 30px;

14. }

Contenuto Esempio: margin-inline

  
  <style>
    .margin-inline-example {
      background-color: #0077b6;
      color: white;
      padding: 20px;
      font-size: 20px;
      margin-inline: 50px 10px;
      text-align: center;
      border-radius: 6px;
    }

    .margin-inline-wrapper {
      background-color: #f9f9f9;
      padding: 20px;
    }
  </style>

  <div class="margin-inline-wrapper">
    <div class="margin-inline-example">
      Margini orizzontali logici
    </div>
  </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