0Pricing
CSS Academy · Lezione

Margin, padding e border logici

Sostituisca top/right/bottom/left con gli equivalenti logici start/end/block/inline.

Margin, padding e border logici è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Equivalenti logici per la spaziatura

Le proprietà fisiche per la spaziatura hanno controparti logiche che usano le direzioni block/inline:

  • margin-top → margin-block-start
  • margin-bottom → margin-block-end
  • margin-left → margin-inline-start
  • margin-right → margin-inline-end

Proprietà shorthand logiche

Le nuove proprietà shorthand coprono entrambi i lati block o entrambi i lati inline:

<div class="card">Card with logical spacing</div>

Centrare con margin-inline: auto

Il classico pattern di centratura ha ora un equivalente logico:

<div class="container">Centered container</div>

Proprietà logiche dei bordi

Impostate i bordi sui lati logici:

<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>

Proprietà logiche di posizionamento

Anche le proprietà di posizionamento hanno controparti logiche:

  • top → inset-block-start
  • bottom → inset-block-end
  • left → inset-inline-start
  • right → inset-inline-end

Shorthand inset

La proprietà inset è già una shorthand logica per tutti e quattro i lati. inset-block e inset-inline consentono di controllare i due assi.

<div class="wrap"><div class="overlay"></div></div>

Proprietà logiche delle dimensioni

Larghezza e altezza hanno equivalenti logici:

<div class="box">Sized box</div>

Confronto: fisico e logico

Una barra laterale con un bordo sul lato iniziale:

<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>

Valori logici di float e clear

Le proprietà float e clear ora supportano valori logici:

<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>

text-align logico

text-align: start e text-align: end sono alternative logiche a left e right e si adattano automaticamente alla direzione del testo.

<div class="nav-link">Aligned to the start (left in LTR)</div>

Strategia di migrazione

Per il nuovo codice, preferite le proprietà logiche. Per il codice esistente, effettuate il refactoring di un componente alla volta. Ordine di priorità per la migrazione: spaziatura (margin/padding), bordi, dimensioni, posizionamento.

Verifica rapida

Quale proprietà logica equivale a margin-left in un layout LTR e dovrebbe diventare margin-right in RTL?

Riepilogo

Le proprietà logiche per margin, padding e border usano le direzioni block e inline invece delle direzioni fisiche top/right/bottom/left. Le shorthand come margin-block, padding-inline e inset-block coprono entrambi i lati contemporaneamente. Nel nuovo codice, preferite le proprietà logiche per tutta la spaziatura, così da ottenere automaticamente il supporto per RTL e per le modalità di scrittura verticali.

Domande Frequenti

La lezione «Margin, padding e border logici» è gratuita?

Sì — il testo completo di «Margin, padding e border logici» è 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 «Margin, padding e border logici»?

Sostituisca top/right/bottom/left con gli equivalenti logici start/end/block/inline. 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 3 di 4.

Quanto tempo richiede la lezione «Margin, padding e border logici»?

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