0Pricing
CSS Academy · Aula

Margin, Padding e Border Lógicos

Substitua top/right/bottom/left pelos equivalentes de propriedades lógicas start/end/block/inline.

Margin, Padding e Border Lógicos é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Equivalentes lógicos para espaçamento

As propriedades físicas de espaçamento têm equivalentes lógicos que usam as direções de bloco/em linha:

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

Propriedades lógicas abreviadas

As novas propriedades abreviadas abrangem os dois lados do bloco ou os dois lados em linha:

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

Centralização com margin-inline: auto

O padrão clássico de centralização agora tem um equivalente lógico:

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

Propriedades lógicas de borda

Defina bordas nos lados lógicos:

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

Propriedades lógicas de posição

As propriedades de posicionamento também têm equivalentes lógicos:

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

Abreviação inset

A propriedade inset já é uma abreviação lógica para os quatro lados. inset-block e inset-inline oferecem controle dos dois eixos.

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

Propriedades lógicas de dimensionamento

Largura e altura têm equivalentes lógicos:

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

Comparação: físicas vs lógicas

Uma barra lateral com uma borda no lado inicial:

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

Valores lógicos de float e clear

As propriedades float e clear agora oferecem suporte a valores lógicos:

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

text-align lógico

text-align: start e text-align: end são alternativas lógicas a left e right, adaptando-se automaticamente à direção do texto.

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

Estratégia de migração

Para código novo, prefira propriedades lógicas. No código existente, refatore um componente de cada vez. Ordem de prioridade para a migração: espaçamento (margin/padding), bordas, dimensionamento, posicionamento.

Verificação rápida

Qual propriedade lógica equivale a margin-left em um layout LTR e deve se tornar margin-right em RTL?

Recapitulação

As propriedades lógicas de margem, preenchimento e borda usam as direções de block e inline em vez de top/right/bottom/left físicos. Abreviações como margin-block, padding-inline e inset-block abrangem os dois lados de uma só vez. Prefira propriedades lógicas para todo o espaçamento em código novo, obtendo suporte automático a RTL e aos modos de escrita verticais.

Perguntas Frequentes

A aula “Margin, Padding e Border Lógicos” é grátis?

Sim — o texto completo de “Margin, Padding e Border Lógicos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Margin, Padding e Border Lógicos”?

Substitua top/right/bottom/left pelos equivalentes de propriedades lógicas start/end/block/inline. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Margin, Padding e Border Lógicos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Por Que Propriedades Lógicas: Internacionalização
  2. Direções de Bloco e Inline
  3. Margin, Padding e Border Lógicos
  4. Propriedades Lógicas em Layouts RTL
← Voltar para CSS Academy