Sintassi

Significato dei valori principali:

• normal: Valore predefinito. L'altezza della linea viene calcolata automaticamente in base al font.

• numero: Un valore relativo alla dimensione del font, es. 1.5 significa 1.5 volte la dimensione del testo.

• lunghezza: Un valore assoluto con unità (px, em, ecc.), es. 20px.

• percentuale: Percentuale rispetto alla dimensione del font, es. 150% equivale a 1.5 volte il font size.

• inherit / initial / unset: Valori globali per ereditare, inizializzare o annullare il valore.

Esempio proprietà: line-height

Codice Esempio: line-height

CODE: CSS

1. .line-height-normal {

2.   line-height: normal;

3.   font-size: 18px;

4. }

6. .line-height-loose {

7.   line-height: 2;

8.   font-size: 18px;

9.   color: #50a14f;

10. }

12. .line-height-tight {

13.   line-height: 1;

14.   font-size: 18px;

15.   color: #e06c75;

16. }

Contenuto Esempio: line-height

  
  <style>
    .line-height-normal {
      line-height: normal;
      font-size: 18px;
    }

    .line-height-loose {
      line-height: 2;
      font-size: 18px;
      color: #50a14f;
    }

    .line-height-tight {
      line-height: 0.8;
      font-size: 18px;
      color: #e06c75;
    }
  </style>

  <p class="line-height-normal">
    Questo è un testo con line-height: normal.
  </p>

  <p class="line-height-loose">
    Questo è un testo con line-height: 2.
  </p>

  <p class="line-height-tight">
    Questo è un testo con line-height: 0.8.
  </p>
  

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