0Pricing
CSS Academy · Lezione

Direzioni block e inline

Impari le direzioni del flusso block e inline e come corrispondono agli assi verticale e orizzontale.

Direzioni block e inline è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Direzione block

La direzione block è la direzione in cui vengono impilate le caselle di livello block. Nei sistemi di scrittura orizzontale (LTR/RTL), la direzione block va dall'alto verso il basso. Nelle modalità di scrittura verticale, cambia da sinistra verso destra o da destra verso sinistra.

Direzione inline

La direzione inline è la direzione in cui scorre il testo all'interno di una riga. Nelle lingue LTR, la direzione inline va da sinistra verso destra. Nelle lingue RTL va da destra verso sinistra. Nelle modalità di scrittura verticale diventa dall'alto verso il basso.

Proprietà writing-mode

writing-mode imposta l'orientamento fondamentale del flusso del testo:

  • horizontal-tb — testo orizzontale, dall'alto verso il basso (predefinito)
  • vertical-rl — testo verticale, colonne da destra verso sinistra
  • vertical-lr — testo verticale, colonne da sinistra verso destra

Sistema di scrittura orizzontale

In writing-mode: horizontal-tb (predefinito):

  • Direzione block = verticale (dall'alto → verso il basso)
  • Direzione inline = orizzontale (da sinistra → destra in LTR, da destra → sinistra in RTL)
  • Block-start = alto, block-end = basso
  • Inline-start = sinistra (LTR) o destra (RTL)

Sistema di scrittura verticale

In writing-mode: vertical-rl:

  • Direzione block = orizzontale (da destra → sinistra)
  • Direzione inline = verticale (dall'alto → verso il basso)
  • Block-start = destra, block-end = sinistra
  • Inline-start = alto, inline-end = basso

Visualizzare gli assi

Immaginateli come un sistema di coordinate che ruota insieme alla modalità di scrittura. Le proprietà logiche descrivono posizioni relative a questo sistema rotabile, non allo schermo fisso.

text-orientation

Nelle modalità di scrittura verticale, text-orientation controlla l'orientamento dei singoli caratteri:

  • mixed: ruota i caratteri latini e mantiene diritti quelli CJK
  • upright: mantiene diritti tutti i caratteri (per il CJK verticale)
  • sideways: ruota lateralmente tutti i caratteri

Etichette verticali ruotate lateralmente

Un uso pratico: etichette ruotate nelle barre laterali o etichette degli assi dei grafici in contesti con scrittura orizzontale:

<div class="chart-label">Revenue</div>

Combinare le modalità di scrittura

Un contenitore può avere una modalità di scrittura, mentre i singoli elementi inline ne hanno un'altra. Questa tecnica viene usata per combinare testo latino e CJK nello stesso paragrafo.

block-size e inline-size

Gli equivalenti logici di larghezza e altezza:

  • inline-size = larghezza in horizontal-tb (la dimensione inline)
  • block-size = altezza in horizontal-tb (la dimensione block)
<div class="box">inline-size sets the width in LTR</div>

Proprietà text-combine-upright

Per il testo verticale che include numeri o abbreviazioni, text-combine-upright (tcy) mantiene diritte brevi sequenze di caratteri e le comprime all'interno di una singola cella di testo verticale.

Verifica rapida

In writing-mode: horizontal-tb con una lingua LTR, quale asse è l'asse "block"?

Riepilogo

L'asse block è la direzione di impilamento delle caselle block; l'asse inline è la direzione del flusso del testo. Nei sistemi di scrittura orizzontale, block = verticale e inline = orizzontale. Nella scrittura verticale questi assi si scambiano. writing-mode controlla l'orientamento fondamentale degli assi. Le proprietà logiche si adattano agli assi che in quel momento sono block e inline.

Domande Frequenti

La lezione «Direzioni block e inline» è gratuita?

Sì — il testo completo di «Direzioni block e inline» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Direzioni block e inline»?

Impari le direzioni del flusso block e inline e come corrispondono agli assi verticale e orizzontale. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Direzioni block e inline»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Perché le proprietà logiche: internazionalizzazione
  2. Direzioni block e inline
  3. Margin, padding e border logici
  4. Proprietà logiche nei layout RTL
← Torna a CSS Academy